javascript - 如何在 Click React 上创建组件

Question

我是 React 的新手，我正在尝试创建一个 Web 应用程序，当我单击一个按钮时它会创建 Rnd 组件。当我单击该按钮时，我只能让它创建一个 Rnd 组件，即使它仍然记录了所有的点击。任何帮助都会很棒。

import { Meteor } from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import Rnd from 'react-rnd';

export default class App extends React.Component {

  renderWidget() {

    console.log('I was clicked');

    const widget = React.createElement(Rnd, {default: {x: 0, y: 0, width: 320, height: 200}, className: 'box'}, React.createElement('p', {}, this.state.text));

    ReactDOM.render(
      widget,
      document.getElementById('widget')
    );
  }

  render () {
    return (
      <div>
        <section className='hero is-dark'>
          <div className='hero-body'>
            <div className='container'>
              <h1 className='title'>
                Dashboard
              </h1>
              <h2 className='subtitle'>
                At A Glance Data
              </h2>
            </div>
          </div>
        </section>
        <section className='section'>
          <div className='container has-text-right'>
            <h2 className='subtitle'>
              Create New Widget
            </h2>
            <button className='button is-dark is-outlined' onClick={this.renderWidget.bind(this)}>
              <span className='icon'>
                <i className='fas fa-plus'></i>
              </span>
            </button>
          </div>
          <div id='widget'>
          </div>
        </section>
      </div>
    );
  }
}

Answer 1

这是您可以做您想做的事情的一种方法:

import React from "react";
import { render } from "react-dom";
import Rnd from "react-rnd";

const Widget = () => <p>Hello World</p>;

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      components: [],
      text: "Hello to you"
    };
  }

  renderWidget() {
    console.log("I was clicked");

    const newComponents = [...this.state.components, Widget];

    this.setState({
      components: newComponents
    });
  }

  render() {
    const { components } = this.state;
    return (
      <div>
        <section className="hero is-dark">
          <div className="hero-body">
            <div className="container">
              <h1 className="title">Dashboard</h1>
              <h2 className="subtitle">At A Glance Data</h2>
            </div>
          </div>
        </section>
        <section className="section">
          <div className="container has-text-right">
            <h2 className="subtitle">Create New Widget</h2>
            <button
              className="button is-dark is-outlined"
              onClick={this.renderWidget.bind(this)}
            >
              <span className="icon">
                <i className="fas fa-plus" />
                Click me
              </span>
            </button>
          </div>
          <div>
            {components.length !== 0 &&
              components.map((Widget, i) => <Widget key={i} />)}
          </div>
        </section>
      </div>
    );
  }
}

render(<App />, document.getElementById("widget"));