Reactでは、どのようにコンポーネントを動的にレンダリングしますか？

Question

私は同じタスクを実行する別の方法についています。

私は、次の線に沿って何かをしたいと思います：

Menu Item 1 
Menu Item 2 
Menu Item 3 

Target(Where component is loaded) 

メニュー項目をクリックすると、ターゲット内部の関連するコンポーネントをレンダリングします。動的にコンポーネントをロードする方法はありますか？私。

<{menuItemName} /> 

これを行うための私の現在の方法論は、ひどい遅く、かつ面倒である（と動作しない）、および

<li onClick=this.setState({menuItem:"MenuItem1"})>Menu Item 1</li> 
<li onClick=this.setState({menuItem:"MenuItem2"})>Menu Item 2</li> 
<li onClick=this.setState({menuItem:"MenuItem3"})>Menu Item 3</li> 

<{this.state.menuItem} /> 

を必要とする、私はこれを行うためのより良い方法がなければならない知っているが、私は現在、私が探している解決策を見つけるためのリアクションボキャブラリを持っていません。私はまた、レンダリングメソッドの状態を設定することは大きなノーであることを認識していますが、私はその代替案を見つけるのに苦労しています。

ありがとうございました。

Answer 1

レンダリングでsetStateを呼び出すのは間違っていますが、イベントリスナーをアタッチするだけです。問題になるのは、React.createElement（ReactComponent、{}）にコンパイルされたjsx表現です。最初の引数はReactクラス（HTML要素の文字列でも可）です。この質問の答えを確認してくださいReact/JSX Dynamic Component Name。あなたが選択した項目どこかに保存する必要が示唆されているように

しかし、あなたの問題を解決するために、あなたはこの

handleEventClick(itemId) { 
    return() => { 
    this.setState({ 
    itemId 
    }); 
    } 
} 

<li onClick={::this.handleEventClick("itemId")}>Item Name</li> 

render() { 
    const { itemId } = this.state; 
    let renderComponent; 
    if (itemId === 'menu1') { 
    renderComponent = <MenuComponent1 />; 
    } else if ....other components 

    return (
    ... 
    <li onClick={::this.handleEventClick("itemId")></li>... 
    {renderComponent} 
); 

} 

Answer 2

ような何かを行うことができます。たとえば、コンポーネントのの状態に入力し、対応するコンポーネントを表示します。

const Component1 = (props) => <div>My component 1</div>; 
const Component2 = (props) => <div>My component 2</div>; 
const Component3 = (props) => <div>My component 3</div>; 

// associate the item id with 
// the corresponding component 
const components = { 
    1: <Component1 />, 
    2: <Component2 />, 
    3: <Component3 />, 
} 

class MyApp extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { selectedItem: 1 } 
    } 

    handleItemClick(itemId) { 
    this.setState({ selectedItem: itemId }); 
    } 

    render() { 
    return (
     <div> 
     <li onClick={() => this.handleItemClick(1)}>Item 1</li> 
     <li onClick={() => this.handleItemClick(2)}>Item 2</li> 
     <li onClick={() => this.handleItemClick(3)}>Item 2</li> 
     {components[this.state.selectedItem]} 
     </div> 
    ); 
    } 
} 

また

あなたはルータに反応使ってURLで現在選択されている項目を保存することができます。

チェックhttps://react-router.now.sh/quick-start out。