单击按钮时强制重新呈现某些组件 - React答案

【问题标题】：Force rerender of some components when a button is click - React单击按钮时强制重新呈现某些组件 - React
【发布时间】：2018-04-03 13:50:43
【问题描述】：

从我的服务器文件中，我有一个函数可以提取一组基于在身份证上。

app.get('/musicbyid', function(req, res){
    var query = req.query.term.toLowerCase();
    music.find({ _id: query }, function(err, allMusic){
      if(err){
      console.log(err);
      } else {
      res.json(allMusic);
      }
  }) 
    console.log(req.query.term);
  });

然后在我的反应文件上，我有一个 getMusicById 函数，它将获得点击 id 并渲染 MusicListDetail 组件 w/c 具有特定信息关于被点击的项目：

class App extends Component{
 constructor(props){
   super(props);

   this.state = { 
     music: [],
     selectedMusic: null
  };

getMusicById(id) {
  axios.get('/musicbyid', {
      params: {
          id: id
      }
  })
  .then(music => this.setState({
      selectedMusic: music.data._id
  }))
  .then(() => console.log('this is is a state >>>>+++', this.state))
  .catch((err) => console.log(err));
}

这是一个组件，其中我列出了所有可以通过按钮点击的音乐：

class MusicListItem extends Component{

  onClickImgMoreBtn(){
    console.log('hi there!');
   }

  render(){
  return (
 <a onClick={this.onClickImgMoreBtn} href={this.props.music._id} >
 <img className="card-img-top" src={this.props.music.poster_path} /></a>
  );

再次，当单击通过 onClickImgMoreBtn 触发的按钮时然后，它必须使用 ff 组件重新渲染具有该特定 id 的详细信息的 dom：

 const MusicDetail = ({music}) => {
  return (

      MUSIC ID:</strong>{music._id}</h4>
      MUSIC TITLE:</strong> {music.title}</h4>
  );

但我不想渲染所有可用的组件所以我在考虑如何做一个条件语句来 MusicDetail 组件时只渲染页眉和页脚单击列表上的按钮时正在重新渲染。

如何使用 click id 音乐详细信息的详细信息重新渲染 dom
如何执行条件语句以仅呈现特定组件在音乐细节组件上。假设我只想渲染<Header /> 和<Footer />

对不起，我是一个初学者，我真的在努力思考如何才能完成所有这些东西在一起。

【问题讨论】：

标签： javascript mongodb reactjs express

【解决方案1】：

来自React documentation

React DOM 将元素及其子元素与前一个元素进行比较，并且仅应用必要的 DOM 更新以使 DOM 达到所需状态。

因此，如果您已分离组件，例如 <Header/>，然后单击按钮会将一些新道具传递给该组件，这不会导致整个 DOM 重新渲染。只有这个确切的组件会被更改

【讨论】：