Question

我试图弄清楚如何正确地将状态传递回子组件。当前，我有项目列表，每当我单击其中一个项目时，它都会更改父组件中"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>
    )
}
}

现在可以更改onclick状态的子组件

video_list_item.js

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>
    );
  };

我想要的是将类"active"添加到此特定行

<li onClick={() => onVideoSelect(video)} className="list-group-item">

基于selectedVideo的状态，该状态在单击该组件后在index.js中发生了变化。

这也是整个列表的代码。

video_list.js

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>
    )
}

Answer 1

您必须将应用程序的selectedVideo状态传递给VideoList组件

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

依次将其传递给每个VideoListItem

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

因此每个项目都可以与selectedVideo进行比较，并在需要时显示“活动”类别。

将状态传递回子组件

1 个答案: