Question

从我的服务器文件中我有一个功能，可以提取一组数据在id。

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组件时呈现页眉和页脚正在按照列表上的按钮重新呈现。

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

对不起，我是一名初学者，我正在努力思考如何完成所有这些工作东西在一起。

Answer 1

来自React documentation

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

因此，如果您有像<Header/>这样的分离组件，并且单击按钮会将一些新的道具传递给此组件，这不会影响整个DOM的重新渲染。只会更改此确切的组件

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

1 个答案: