onClick, yeni tepki bileşenini oluşturmuyor.

Question

Ben dünyayı tepki yeniyim ve böyle bir çizgi var:

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

ve üzerinde konsolda üzerinde yazılı hello alacak tıklayın.

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

şimdi butonuna tıklandığında, ben NewComponent hale bekliyoruz: Artık çizgiyi geçmek. Ama öyle değil.

Emin değilim, neden böyle olduğu. Yukarıdaki kodu render yönteminde olduğunu unutmayın.

Answer 1

Büyük ihtimalle tıklatıldıktan sonra düğmenin yanındaki diğer bileşeni gösteren durumlu bir bileşene sahip olmak isteyebilirsiniz. Tek yapmanız gereken tek şey düğmeye tıklandığı olmadığını izlemek edilir:

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

Burada eylem göstermek için bir CodePen bu.

HTML

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

JSX nasıl çalıştığını sadece değil

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