React：使用多个 onClick 重复渲染 JSX

Posted 2023-02-22

【中文标题】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>