ReactJS OnClick 渲染

Question

我是 ReactJS 的新手，我正在尝试制作一个菜单，通过按下任何功能，活动类将消失并出现新页面。例如，在这里，我试图点击我的订单并转发到我要求加载的页面。我该如何正确地做到这一点？这是我当前的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";

class MainPanel extends React.Component {
    render() {
        return (
            <div className="main-layout">
                <header>
                    <ul className="top">
                        <h1>Header</h1>
                    </ul>
                </header>
                <ul className="categories">
                    <li>Main Panel</li>
                    <li onClick={<MyOrder />}>My Order</li>
                    <li>Technical Support</li>
                    <li>My Payments</li>
                    <li>Suggestions/ Questions</li>
                </ul>
            </div>
        );
    }
}
function MyOrder () {
        return (
            <div className="main-layout">
                <header>
                    <ul className="top">
                        <h1>My Order</h1>
                    </ul>
                </header>
                <ul className="categories">
                    <li>Where is my order?</li>
                    <li>My order delays more than the expected time</li>
                    <li>My order status shows that the order arrived but it did not</li>
                    <li>I have a complaint</li>
                    <li>Suggestions/ Questions</li>
                </ul>
            </div>
        );
}

ReactDOM.render(
    <MainPanel />,
    document.getElementById('root')
);

Answer 1

如果没有 React Router 和其他 3rd 方库，您可以执行以下操作：

class Overview extends React.Component {
    onMenuClick(id) {
        return this.props.onMenuClick(id);
    }

    render() {
        return(
            <ul className="categories">
                <li onClick={this.onMenuClick.bind(this, "mainPanel")}>Main Panel</li>
                <li onClick={this.onMenuClick.bind(this, "myOrder")}>My Order</li>
                <li onClick={this.onMenuClick.bind(this, "technicalSupport")}>Technical Support</li>
                <li onClick={this.onMenuClick.bind(this, "myPayments")}>My Payments</li>
                <li onClick={this.onMenuClick.bind(this, "suggestions")}>Suggestions/ Questions</li>
            </ul>
        );
    }
}

class MainPanel extends React.Component {
    // sets the initial value for this.state.page
    componentWillMount() {
        this.setState({
            page: "overview"
        });
    }

    switchPage(id) {
        this.setState({ page: id });
    }

    showComponent() {
        if(this.state.page === "overview") return (<Overview
            onMenuClick={::this.switchPage}
        />);
        if(this.state.page === "myOrder") return <MyOrder />;

        throw new Error(`${this.state.page} is not a valid page id`);
    }

    render() {
        return (
            <div className="main-layout">
                <header>
                    <ul className="top">
                        <h1>Header</h1>
                    </ul>
                </header>
                { this.showComponent() }
            </div>
        );
    }
}

您通过更新状态来更改视图。根据状态不同的组件被安装/卸载。

根据我的经验，请注意：尝试通过 React Baobab 或类似的方式（中心化状态）处理您的应用状态（在我们的例子中为当前页面信息），否则所有这些道具冒泡会变得混乱。