onClick non esegue il rendering di nuovo componente di reazione.

Question

Sono nuovo di reagire mondo e ho riga come questa:

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

e cliccare otterrete hello stampata sulla console. Ora cambiare la linea a:

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

ora in poi fare clic sul pulsante, mi aspetto che il NewComponent da rendere. Ma non è così.

Non sono sicuro, perché è così. Si noti che ho il codice sopra nel metodo render.

Answer 1

Probabilmente si desidera avere un componente stateful che mostri l'altro componente accanto al pulsante dopo che è stato fatto clic. Tutto quello che dovete fare è traccia se il pulsante è stato cliccato:

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

Ecco un CodePen per mostrare in azione.

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