Question

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

＆＃13;

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

＆＃13;

Answer 1

我无法运行您的代码但是很快我就不会在每次单击按钮时使用ReactDOM.render渲染新组件。相反，我添加数组，例如＆＃34; generatedComponents＆＃34;到应用程序组件的状态，每次单击该按钮，它都会向该数组添加一个新组件。然后，在App-components呈现方法中呈现该数组中的组件。

此外，我不会在renderWidget-function中使用变量类型 const ，而是让或 var 。

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

如何在单击React上创建组件

2 个答案: