onClick不会呈现新的react组件

【字号: 日期:2024-04-17浏览:27作者:雯心
(adsbygoogle = window.adsbygoogle || []).push({}); 如何解决onClick不会呈现新的react组件?

您可能希望有一个状态组件,该状态组件在单击按钮之后在按钮旁边显示另一个组件。您需要做的就是跟踪按钮是否被单击:

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> ); }}解决方法

我是新来的世界,我有这样的话:

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

然后单击,您将被hello打印在控制台上。现在将行更改为:

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

现在点击该按钮,我希望它NewComponent会被渲染。但事实并非如此。

我不确定为什么会这样。请注意,我在render方法中有上面的代码。

相关文章: