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;

ma​​inApp.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 的好时机。使用 React Router，点击 Home Screen 链接将更改 url，这将呈现在 Router 中映射的组件，如下所示：

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

您可能想四处搜索使用带有侧边栏的 React Router 的示例，例如 this one。