按鈕來更新主要內容區域

Question

我在學習反應，試圖建立一個簡單的博客。我的目標是在側邊欄中有一個文章列表，點擊後可以在主要內容區域呈現點擊文章的內容。理想情況下，我會從data1對象中獲取數據。

我還沒有讀到關於狀態的更多信息，但是從我所知道的情況來看，如果數據更新/更改，應該使用狀態，而在我的情況下，此時一切似乎都是靜態的。也許如果文章列表在旅途中更新，那麼列表應該使用一個狀態......我是否正確地使用這個思路（概念上）？我應該使用狀態還是我在正確的軌道上？如何解決我的代碼？

var ProjectList = React.createClass({ 
    renderArticle:function(i){ 
     //console.log(this.props.data[i]) 

     return(
      <ProjectContent upd={this.props.data[i]} /> 
     ); 
    }, 
    render:function(){ 
     //console.log(this.props.data) 

     var projectNode = this.props.data.map(function(project, i) { 
      return (
       <div onClick={this.renderArticle.bind(this, i)} key={i} className="topicHolder" desc={project.desc}> 
        <div className="topicHolderTitle">{project.title}</div> 
        <div className="topicHolderDate left">{project.date}</div> 
        <div className="topicHolderTag left">{project.tag}</div> 
        <div className="clearfix"></div> 
       </div> 
      ); 
     },this); 

     return(
      <div className="sidebarMenu"> 
       {projectNode} 
      </div> 
     ); 
    } 
}); 


var ProjectContent = React.createClass({ 
    render:function(){ 
     //console.log(this.props.upd) 

     return(
      <div id="mainContentArea"> 
       <div className="article"> 
        <h1> 
         {this.props.upd.title} 
        </h1> 
        <br /> 
        <div> 
         <div className="konec">.</div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 


var WholePage = React.createClass({ 
    render:function(){ 
     return(
      <div> 
       <ProjectList data={this.props.data} /> 
       <ProjectContent upd={this.props.data} /> 
      </div> 
     ); 
    } 
}); 

var data1 = [ 
    {id: 3, title: "Kindle for geeks", desc: "Lorem ipsum dolor sit amet total control", date: '12 Oct 2015',tag:'product1'}, 
    {id: 1, title: "Kindle for geeks", desc: "Lorem ipsum dolor sit amet total control", date: '12 Oct 2015',tag:'product'}, 
    {id: 2, title: "Tree installation", desc: "Total control sit amet mahmut mamutov", date:'30 Dec 2015',tag:'installation'} 
]; 

ReactDOM.render(<WholePage data={data1} />,document.getElementById('page')); 

Answer 1

問題是你不能從點擊處理程序返回jsx元素。

我調整你的代碼，並將點擊處理程序移動到頂層組件並將其作爲道具傳遞。現在，當單擊該項目時，該功能會更新頂級組件的狀態，並重新呈現所有內容以顯示詳細信息。

var ProjectList = React.createClass({ 

    render:function(){ 
     //console.log(this.props.data) 

     var projectNode = this.props.data.map(function(project, i) { 
      return (
       <div onClick={this.props.renderArticle.bind(this, i)} key={i} className="topicHolder" desc={project.desc}> 
        <div className="topicHolderTitle">{project.title}</div> 
        <div className="topicHolderDate left">{project.date}</div> 
        <div className="topicHolderTag left">{project.tag}</div> 
        <div className="clearfix"></div> 
       </div> 
      ); 
     },this); 

     return(
      <div className="sidebarMenu"> 
       {projectNode} 
      </div> 
     ); 
    } 
}); 


var ProjectContent = React.createClass({ 
    render:function(){ 
     //console.log(this.props.upd) 

     return(
      <div id="mainContentArea"> 
       <div className="article"> 
        <h1> 
         {this.props.article.title} 
        </h1> 
        <br /> 
        <div> 
         <div className="konec">.</div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 


var WholePage = React.createClass({ 
    //add state 
    getInitialState:function(){ 
     return { 
      article: {} 
     }; 
    }, 

    //move click handler to here 
    renderArticle:function(i){ 
     console.log(data1[i]) 

     this.setState({ 
      article: data1[i] 
     }); 
    }, 

    render:function(){ 
     return(
      <div> 
       <ProjectList data={this.props.data} renderArticle={this.renderArticle} /> 
       <ProjectContent upd={this.props.data} article={this.state.article} /> 
      </div> 
     ); 
    } 
}); 

var data1 = [ 
    {id: 3, title: "Kindle for geeks", desc: "Lorem ipsum dolor sit amet total control", date: '12 Oct 2015',tag:'product1'}, 
    {id: 1, title: "Kindle for geeks", desc: "Lorem ipsum dolor sit amet total control", date: '12 Oct 2015',tag:'product'}, 
    {id: 2, title: "Tree installation", desc: "Total control sit amet mahmut mamutov", date:'30 Dec 2015',tag:'installation'} 
]; 

ReactDOM.render(<WholePage data={data1} />,document.getElementById('page'));