ルータなしのReactJS戻り矢印

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初心者。 概要liのようにMyOrder liをクリック可能にしようとしています。なぜそれは動作しませんか？私はそれが動的ではないことを知っている - 私はすでに戻って矢印を押してどこに行くのか知っています。 ********の行は私が話す線です。また、コードをどのように最適化できますか？

ありがとうございます。

Answer 1

あなたのペーストビンが与えられている場合、onMenuClickプロパティをMyOrderコンポーネントに割り当てないでください。それでは、後でそれを呼び出すことはできません。あなたは/貼り付けをコピーすることを実現しているかもしれません

/コードの同じ部分を複数回繰り返して：あなたのコードの最適化について

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`); 
} 

：あなたがOverviewで行うと同じように、このようにそれを追加します。常に同じ値のセット（ルート）を使用します。私は、ルートとそのラベルの配列を持つ構成ファイルを作成し、それをループして各ルートのコンポーネントを表示します。

もしそうしたくなければ、少なくとも1つのレンダリングで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)} 
     /> 
    ); 
}