Reactjs 将状态传递回子组件

我试图弄清楚如何正确地将状态传递回子组件。 目前我有一个项目列表，每次我点击其中一个项目时，它都会改变父组件中

“selectedVideo”

变量的状态。然后我想将类添加到与子组件中的状态相对应的项中。基本上，当我点击列表中的那个项目时，它会高亮显示，因为它只是改变了父组件的状态

因此，主要的父组件在这里：

index.js

class App extends Component {
constructor(props) {
super(props)
this.state = {
    videos2:[],
    selectedVideo:null
 }
this.DMSearch()
}

DMSearch(term){
    fetch(`https://api.dailymotion.com/videos?fields=description,id,thumbnail_60_url,title,url,&limit=5&search=${term}`)
    .then(result => result.json())
    .then(videos2 => {
        //console.log(videos2.list[0]);
        this.setState({
           videos2: videos2.list, 
           selectedVideo: videos2.list[0]
        });
        //console.log(this.state.selectedVideo);
     });  
    }  
render () {
    const DMSearch = _.debounce((term) => { this.DMSearch(term)}, 400);
    return (
        <div>
            <SearchBar onSearchTermChange= {DMSearch}/>
            <VideoDetail video={this.state.selectedVideo}/> 
            <VideoList 
            onVideoSelect={selectedVideo=>this.setState({selectedVideo})}
            videos2={this.state.videos2}/>
        </div>
    )
}
}  

const VideoListItem = ({video, onVideoSelect}) => {
    const imageUrl = video.thumbnail_60_url;

    return (
      <li onClick={() => onVideoSelect(video)} className="list-group-item">
        <div className="video-list media">
          <div className="media-left">
            <img className="media-obj"  src={imageUrl}/>
          </div>
          <div className="media-body">
            <div className="media-heading">{video.title}</div>
          </div>
        </div>
      </li>
    );
  };

const VideoList = (props) => {

    const videoItems = props.videos2.map((video)=>{
        return (
        <VideoListItem 
            onVideoSelect={props.onVideoSelect}
            key={video.id} 
            video={video} />
        )
    })

    return (
        <ul className="col-md-4 list-group">
            {videoItems}
        </ul>
    )
}

根据单击该组件后在index.js中更改的

selectedVideo

的状态

下面是整个列表的代码

视频列表.js

class App extends Component {
constructor(props) {
super(props)
this.state = {
    videos2:[],
    selectedVideo:null
 }
this.DMSearch()
}

DMSearch(term){
    fetch(`https://api.dailymotion.com/videos?fields=description,id,thumbnail_60_url,title,url,&limit=5&search=${term}`)
    .then(result => result.json())
    .then(videos2 => {
        //console.log(videos2.list[0]);
        this.setState({
           videos2: videos2.list, 
           selectedVideo: videos2.list[0]
        });
        //console.log(this.state.selectedVideo);
     });  
    }  
render () {
    const DMSearch = _.debounce((term) => { this.DMSearch(term)}, 400);
    return (
        <div>
            <SearchBar onSearchTermChange= {DMSearch}/>
            <VideoDetail video={this.state.selectedVideo}/> 
            <VideoList 
            onVideoSelect={selectedVideo=>this.setState({selectedVideo})}
            videos2={this.state.videos2}/>
        </div>
    )
}
}  

const VideoListItem = ({video, onVideoSelect}) => {
    const imageUrl = video.thumbnail_60_url;

    return (
      <li onClick={() => onVideoSelect(video)} className="list-group-item">
        <div className="video-list media">
          <div className="media-left">
            <img className="media-obj"  src={imageUrl}/>
          </div>
          <div className="media-body">
            <div className="media-heading">{video.title}</div>
          </div>
        </div>
      </li>
    );
  };

const VideoList = (props) => {

    const videoItems = props.videos2.map((video)=>{
        return (
        <VideoListItem 
            onVideoSelect={props.onVideoSelect}
            key={video.id} 
            video={video} />
        )
    })

    return (
        <ul className="col-md-4 list-group">
            {videoItems}
        </ul>
    )
}

const VideoList=（道具）=>{
const videoItems=props.videos2.map（（视频）=>{
返回(
)
})
返回(

{videoItems}

)
}

您必须将应用程序的

selectedVideo

状态传递给

VideoList

组件

<VideoList 
  videos2={this.state.videos2}
  onVideoSelect={selectedVideo=>this.setState({selectedVideo})}
  selectedVideo={this.state.selectedVideo}
/>

---

因此，每个项目都可以将自己与所选视频进行比较，并在需要时显示一个“活动”类。

因此，通过这种方法，我应该将视频列表项目更改为基于类的组件，以便将活动类放入该组件中吗？我解决了这个问题，只需通过更改这行代码：

onVideoSelect（video）}className={活动？'列表组项目活动'：'列表组项目'}>