如何在 Click React 上创建组件答案

【问题标题】：How to create a Component on Click React如何在 Click React 上创建组件
【发布时间】：2018-08-29 21:44:36
【问题描述】：

我对 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>
    );
  }
}

【问题讨论】：

以下是正确的做法：codesandbox.io/s/91x4rkkn5r 你不应该在你的类中渲染 DOM，你需要阅读 state 之类的东西。
感谢所有这些真的很有帮助。
@Atomator，你觉得我的回答有用吗？请点赞。谢谢。
@JohnKennedy，我确实投了赞成票，但我没有足够的声誉让它公开出现。
@Atomator，您可能希望接受它作为正确答案。这将被公开反映。谢谢。

标签： javascript reactjs meteor

【解决方案1】：

我无法运行您的代码，但快速浏览一下，我可能不会在每次单击按钮时使用 ReactDOM.render 来呈现新组件。相反，我会添加数组，例如“generatedComponents”添加到 App 组件的状态，每次单击按钮时，它都会向该数组添加一个新组件。然后在 App-components 渲染方法中渲染该数组中的组件。

另外，我不会在 renderWidget 函数中使用变量类型 const，而是使用 let 或 var。

【讨论】：

const 在这里很好；它是本地的，一旦函数完成就消失了。

【解决方案2】：

这是您可以做自己想做的事情的一种方法：

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"));

【讨论】：

componets.length !== 0 是多余的，它可以只是 components.length 不错的答案
感谢@Omar 指出这一点。我这样做是为了避免意外的惊喜。你是对的，它也可以这样做。