如何更新在父级内部使用map()渲染的所有子级的状态?

问题描述 投票:0回答:1

我的目标是根据视频的播放时间确定子组件的可见性。通过map方法可以渲染称为InfoElement的组件。

{this.props.sceneNavigator.viroAppProps.tours[this.state.tourId].scenes[this.state.sceneId].infoElements.map((infoElement, key) => {
return (
    <InfoElement 
        content={{uri: infoElement.poiImage}}
        startingTime = {infoElement.startingTime}
        endingTime = {infoElement.endindTime}
        contentCardScale={[5, 5, 5]} 
        position={polarToCartesian(infoElement.coordinate)}/>
    )
    })}

在父级内部,有一个回调_onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds),当视频的当前播放位置更改时,将调用此回调。

<Viro360Video
    source={{uri:this.props.sceneNavigator.viroAppProps.tours[this.state.tourId].scenes[this.state.sceneId].backgroundSource}}
    onBufferEnd={this.onLoadEnded}
    onUpdateTime={this._onUpdateTime}
    rotation={[0, 0, 0]}
    onError={this.onError}/>

    _onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) {
  this.setState({
                  visible : false,
               });

           console.log(currentPlaybackTimeInSeconds);
        }

我想做的是将currentPlaybackTimeInSecondsstartingTimeendingTime进行比较,并使infoElement组件仅在currentPlaybackTimeInSecondsstartingTimeendingTime之间时才可见。我的问题是我没有一个infoElement,而是一个列表,所以我不知道如何引用它们。这个想法将是更新每个状态,但是我不知道该怎么做。有什么建议吗?感谢所有能回答我的问题。

javascript reactjs react-native viro-react
1个回答
0
投票

您需要对这一想法进行反驳。您应该做的是告诉每个InfoElement当前时间,然后它们根据该时间更改其呈现的输出。像这样的东西:

const React = require('react');
const {useState,useCallback} = React;

const InfoElement = ({currentTime,startingTime,endingTime}) => {
    if(currentTime >= startingTime && currentTime < endingTime){
        return (
            <>
                {/* Your render code here*/}
            </>
        );
    }
    else {
        return null;
    }
}

const App = ({sceneNavigator}) => {
    const [currentTime,setCurrentTime] = useState(-1);
    const [tourId,setTourId] = useState(-1);
    const [sceneId,setSceneId] = useState(-1);

    const onUpdateTime = useCallback((time) => {
        setCurrentTime(time);
    },[]);

    let infoElements = [];
    if(sceneNavigator.viroAppProps.tours[tourId] != null && sceneNavigator.viroAppProps.tours[tourId].scenes[sceneId] != null){
        infoElements = sceneNavigator.viroAppProps.tours[tourId].scenes[sceneId].infoElements;
    }

    return (<>
        <Viro360Video
            onUpdateTime={onUpdateTime}

        />

        {infoElements.map((infoElement, key) => (
            <InfoElement
                key={`infoElement-${key}`}
                content={{uri: infoElement.poiImage}}
                startingTime = {infoElement.startingTime}
                currentVideoTime={currentTime}
                endingTime = {infoElement.endindTime}
                contentCardScale={[5, 5, 5]} 
                position={polarToCartesian(infoElement.coordinate)}/>
            )
        )}
    </>);
}

在此,您可以看到我们正在挂接到Viro360Video onUpdateTime并设置为currentTime状态。然后,我们将currentTime传递给每个InfoElement。在InfoElement内部,我们对照currentTimestartingTime检查传入的endingTime,如果在这些边界之内,则渲染元素,否则返回null。

[Notes

  1. 我在功能组件内部使用钩子,而不是使用react类。在此处查看其用法:https://reactjs.org/docs/hooks-intro.html
  2. 我使用片段(<></>)而不是divView,因为我不知道您的目标是React Native还是ReactDOM或其​​他渲染引擎。
© www.soinside.com 2019 - 2024. All rights reserved.