onClick事件在reactjs的父元素之外打開另一個組件？

Question

到目前爲止，我有一個單頁反應應用程序與兩個組件。 MenuScreen和HomeScreen。當單擊SpeechBubble圖標時，MenuScreen中的當前onClick事件將HomeScreen顯示爲MenuScreen的子項。如何觸發onClick以在MenuScreen之外顯示HomeScreen組件？這個屏幕截圖顯示了我想要做的事情。

MenuScreen.js

import store from '../libs/store.js'; 
var jsforce = require('jsforce'); 

class menuScreen extends React.Component { 

    constructor(props) { 
     super(props) 

     const data = store.getState(); 

     this.state = { 
      username: '', 
      messages: data.messages, 
      records: [], 
      showModal: false, 
      showChat: [] //initially blank array 
     } 
    } 

    handleSearch(e) { 
     this.setState({ 
      username: e.target.value 
     }) 
    } 

    handleChange(evt) { 
     this.setState({ 
      username: evt.target.value.substr(0, 100) 
     }); 

    } 

    onClick(i, e) { 
     e.preventDefault(); 

     let showChat = this.state.showChat.slice(); 
     showChat[i] = !showChat[i]; //use that index to change the specific value 
     this.setState({ showChat }) 
    } 

    onLinkClicked() { 

     var conn = new jsforce.Connection({ 
      serverUrl: 'https://cs63.salesforce.com', 
      accessToken: sessionStorage.getItem('token') 
     }) 

     var parent = this.state.username 
     //console.log(this.state.username) 
     conn.sobject("Contact").find({ 
       LastName: { 
        $like: parent 
       } 
      }, 'Id, Name, Phone, Account.Name' 

     ).sort('-CreatedDate Name'). 
     limit(5).skip(10).execute((err, records) => { //use arrow function 
      if (err) { 
       return console.error(err); 
      } 
      this.setState({ 
       records: records, 
      }) 
     }) 

    } 

    render() { 
     return (
      <div className='menubox' id='menubox'> 

       <div className="boxbox"> 
        <input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} /> 
        <input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /></div> 
       <div> 
        <div> 
         /*use the index also in map*/ 
         {this.state.records.map((record, i) => (
          <div className="info-block block-info clearfix"> 
           <div className="square-box pull-left"> 
            <span className="glyphicon glyphicon-user glyphicon-lg"></span> 
           </div> 
           <h5>{record.Name}</h5> 
           <h4>{record.Phone}</h4> 
           <p>{record.Account.Name}</p> 

            <a onClick={this.onClick.bind(this, i)}> 
            <img src="./img/speechbubble.png" className="textIcon" /> 
            {this.state.showChat[i] && < HomeScreen/>} 
           </a> 
          </div> 
         ))} 
        </div> 

       </div> 
      </div> 

     ) 
    } 

} 

export default menuScreen; 

mainApp.js

class MainApp extends React.Component{ 
    constructor(){ 
     super(); 

     const data = store.getState(); 

     this.state = { 
      username: '', 
      messages: data.messages, 
      records: [], 
      records: data.records, 
      showChat:data.showChat 

     }; 



    } 


    render(){ 
    return (
     <div> 
     <MenuScreen /> 
     </div> 

     ); 
    } 
} 


export default MainApp; 

HomeScreen.js

class HomeScreen extends React.Component { 
    constructor(){ 
     super(); 

     //Redux podaci za "hardcoding" 
     const data = store.getState(); 

     this.state = { 
      username: '', 
      messages: data.messages, 
      records: [], 
      records: data.records, 
      showChat:data.showChat 

     }; 




} 






    render(){ 
    return (
     <div> 
      <h2>HELLO</h2> 
      <p>Cras facilisis urna ornare ex volutpat, et 
      convallis erat elementum. Ut aliquam, ipsum vitae 
      gravida suscipit, metus dui bibendum est, eget rhoncus nibh 
      metus nec massa. Maecenas hendrerit laoreet augue 
      nec molestie. Cum sociis natoque penatibus et magnis 
      dis parturient montes, nascetur ridiculus mus.</p> 

      <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p> 
     </div> 
    ); 
    } 

} 

export default HomeScreen; 

Answer 1

一個選項是在那裏有一個更高級別的組件，比如Page，它包裝了菜單和內容部分。 Page然後將確定顯示哪些內容。

你還提到你正在使用單頁面應用程序。這可能是使用React Router的好時機。使用陣營路由器，點擊主屏幕鏈接會更改URL，這將使在路由器映射的組件，如：

class App extends Component { 
    render() { 
    return (
     <Router history={hashHistory}> 
     <Route path='/home' component={HomeScreen} /> 
     </Router> 
    ) 
    } 
} 

您可能希望谷歌圍繞使用陣營路由器與側邊欄的例子，像this one。