React:使用多个 onClick 重复渲染 JSX
Posted
技术标签:
【中文标题】React:使用多个 onClick 重复渲染 JSX【英文标题】:React: Render JSX repeatedly with multiple onClicks 【发布时间】:2017-07-29 04:47:14 【问题描述】:I followed this *** answer however i want to know how i can modify this to have it render jsx again & again with multiple clicks
【问题讨论】:
【参考方案1】:这里有一个CodePen 来展示它
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>
);
;
ReactDOM.render(
<App />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">loading...</div>
【讨论】:
以上是关于React:使用多个 onClick 重复渲染 JSX的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中使用 onClick() 函数渲染不同的组件?
使用带有graphql的react hooks时,按钮元素中的onClick不会触发react-table中的重新渲染
为啥我的 onClick 在渲染时被调用? - React.js