[英]onClick doesn't render new react component.
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 hello
printed on the console.单击后,您将在控制台上打印hello
。 Now change the line to:现在将行更改为:
<Button onClick={() => <NewComponent />}>Button</Button>
now on click on the button, I expect the NewComponent
to be rendered.现在单击按钮,我希望呈现NewComponent
。 But it doesn't.但事实并非如此。
I'm not sure, why that is the case.我不确定,为什么会这样。 Note that I have the above code in the render
method.请注意,我在render
方法中有上述代码。
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>
);
}
}
Here's a CodePen to 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")
);
改用: {this.state.clicked && <NewComponent />}
You need to set state to track visibility of the component.您需要设置状态以跟踪组件的可见性。 Default it to false, and onclick set state to true.默认为 false,onclick 将 state 设置为 true。 In your render do something like {this.state.visible ?在你的渲染中做一些像 {this.state.visible ? : null} : 空值}
you can use withRouter() of react-router-dom .您可以使用react-router-dom 的withRouter() 。 When we use <Route path='/path' component={newComponent} />
react-router-dom passes three props "history,location and match" , you can use push() function of history props in your onClick just by passing your whole component in withRouter() as:当我们使用<Route path='/path' component={newComponent} />
react-router-dom 传递三个 props "history,location and match" 时,您可以在 onClick 中使用历史道具的push()函数,只需传递您在withRouter() 中的整个组件为:
JSX JSX
import { withRouter } from 'react-router-dom' ;
import Button from 'buttonFolder/button.component';
const yourComponent = ({history}) => {
return (
<Button onClick{() => history.push.('/path')}> New componentPage </Button>
)};
export default withRouter(yourComponent);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.