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

React:每次渲染都会调用 onClick 处理程序?

React hooks:为啥异步函数中的多个 useState 设置器会导致多次重新渲染?

Reactjs:在onClick方法中传递参数而不会造成性能损失[重复]