onClickは新しい反応コンポーネントを表示しません。

Question

私は世界を反応させるのに新たなんだと私はこのような行があります。

<Button onClick={() => console.log("hello")}>Button</Button> 

と上をコンソールに印刷helloを取得しますクリックしてください。今すぐに行を変更：ボタンのクリックで

今

<Button onClick={() => <NewComponent />}>Button</Button> 

、私はNewComponentがレンダリングされることを期待します。しかし、それはしません。

私は確信していません、なぜそうですか。私はrenderメソッドに上記のコードがあることに注意してください。

Answer 1

ボタンをクリックした後に、他のコンポーネントをボタンの横に表示するステートフルコンポーネントが必要になる場合があります。あなたがする必要があるのは、ボタンがクリックされたかどうかを追跡です：

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showComponent: false, 
    }; 
    this._onButtonClick = this._onButtonClick.bind(this); 
    } 

    _onButtonClick() { 
    this.setState({ 
     showComponent: true, 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button onClick={this._onButtonClick}>Button</Button> 
     {this.state.showComponent ? 
      <NewComponent /> : 
      null 
     } 
     </div> 
    ); 
    } 
} 

Answer 2

ここでのアクションでそれを表示するCodePenです。それがどのように動作するかだけではありません

HTML

<div id="root">loading...</div> 

JSX

class NewComponent extends React.Component { 
    render() { 
    return (
     <div {...this.props}> 
     new component 
     </div> 
    ); 
    } 
} 

class Button extends React.Component { 
    render() { 
    return (
     <button {...this.props}> 
     click 
     </button> 
    ); 
    } 
} 

class App extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     clicked: false 
    }; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState({ 
     clicked: true 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button onClick={this.handleClick} /> 
     {this.state.clicked ? <NewComponent /> : null} 
     </div> 
    ); 
    } 
}; 

React.render(
    <App />, 
    document.getElementById("root") 
);