Question

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

    render() {
        return(
            <ul className="categories">
                <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 MyOrder extends React.Component {

    onMenuClick(id) {
        return this.props.onMenuClick(id);
    }

    render() {
        return (
            <div className="main-layout">
                <header>
                    <ul className="top">
                        <h1>Order & Delivery</h1>
                       ********<li onClick={this.onMenuClick.bind(this, "overview")}>Back</li>********
                    </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>
        );
    }

}

ReactJS初学者。试图使MyOrder li可以像Overview li一样点击。为什么它不起作用？我知道它不是动态的 - 我已经知道按下箭头时会去哪里。与********一致的是我所说的话。另外，我如何优化我的代码？

谢谢。

Answer 1

好吧，鉴于您的pastebin，您不会将onMenuClick属性分配给MyOrder组件。所以它之后无法调用它。像这样添加它，就像使用Overview：

一样

showComponent() {
    if(this.state.page === "overview") return (<Overview
        onMenuClick={this.switchPage.bind(this)}
    />);
    if(this.state.page === "myOrder") return (<MyOrder
        onMenuClick={this.switchPage.bind(this)}
    />);
    if(this.state.page === "technicalSupport") return <TechnicalSupport />;
    if(this.state.page === "myPayments") return <MyPayments />;
    if(this.state.page === "suggestions") return <Suggestions />;

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

关于代码优化：

您可能已经意识到您多次复制/粘贴/重复相同的代码片段并始终使用相同的值集（您的路由）。我将创建一个配置文件，其中包含一系列路由及其标签，然后循环遍历它以显示组件的每个路径。

如果您不想这样做，至少使用只有一个渲染的switch语句。见下：

showComponent() {
    const {
        page
    } = this.state;
    const Component = null;
    switch (page) {
        case 'overview':
            Component = Overview;
            break;
        case 'myOrder':
            Component = MyOrder;
            break;
        case 'technicalSupport':
            Component = TechnicalSupport;
            break;
        case 'myPayments':
            Component = MyPayments;
            break;
        case 'suggestions':
            Component = Suggestions;
            break;
        default:
            throw new Error(`${page} is not a valid page id`);
            break;
    }

    return (
        <Component 
            onMenuClick={this.switchPage.bind(this)}
        />
    );
}

没有路由器

1 个答案: