Javascript onClick 不呈现新的反应组件。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33840150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onClick doesn't render new react component.
提问by batman
I'm new to react world and I have line like this:
我是反应世界的新手，我有这样的线路：
<Button onClick={() => console.log("hello")}>Button</Button>
and on click you will get helloprinted on the console. Now change the line to:
单击后，您将hello在控制台上打印。现在将行更改为：
<Button onClick={() => <NewComponent />}>Button</Button>
now on click on the button, I expect the NewComponentto be rendered. But it doesn't.
现在点击按钮，我希望NewComponent渲染。但事实并非如此。
I'm not sure, why that is the case. Note that I have the above code in the rendermethod.
我不确定，为什么会这样。请注意，我在render方法中有上述代码。
回答by Felix Kling
You probably want to have a stateful component that shows the other component next to the button after it was clicked. All you need to do is track whether the button was clicked:
您可能希望有一个有状态的组件，在单击按钮后显示另一个组件。您需要做的就是跟踪按钮是否被点击：
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>
);
}
}
回答by Brian Swisher
Here's a CodePento show it in action.
这是一个CodePen来展示它的实际效果。
HTML
HTML
<div id="root">loading...</div>
JSX
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")
);
回答by Valentin Micu
Use instead:
{this.state.clicked && <NewComponent />}
改用：
{this.state.clicked && <NewComponent />}
回答by Ian
You need to set state to track visibility of the component. Default it to false, and onclick set state to true. In your render do something like {this.state.visible ? : null}
您需要设置状态以跟踪组件的可见性。默认为 false，onclick 将 state 设置为 true。在你的渲染中做一些像 {this.state.visible ? ： 空值}
