onClick rendert keine neue react-Komponente.

Question

Ich bin neue Welt zu reagieren, und ich habe Linie wie folgt aus:

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

und klicken Sie hello auf der Konsole gedruckt bekommen. Jetzt die Zeile ändern:

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

jetzt auf Klick auf den Button, erwarte ich, dass die NewComponent gemacht werden. Aber das tut es nicht.

Ich bin mir nicht sicher, warum das der Fall ist. Beachten Sie, dass ich den obigen Code in der render Methode habe.

Answer 1

Sie möchten wahrscheinlich eine Stateful-Komponente haben, die die andere Komponente neben der Schaltfläche anzeigt, nachdem sie geklickt wurde. Alles, was Sie tun müssen, ist verfolgen, ob die Schaltfläche geklickt wurde:

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

hier ein CodePen es in Aktion zu zeigen.

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") 
);