“反应”按钮最多渲染一次

Question

我有一个用于渲染新组件的按钮（实际上是图表，我已经简化了示例，只显示了文本），它在第一次单击时在页面上添加了文本，但不会在页面上添加任何新的文本对象。点击。

我已经测试过该函数是否多次运行，方法是使该函数向数组中添加元素，以使其多次运行，因此为什么多次单击时不将新的文本对象呈现给页面？ ？

我可能缺少一些基本知识，不胜感激。

import React from 'react';
import './App.css';

class NewChart extends React.Component {
  render() {
    return (
      <div>Text</div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        Add chart
      </button>
    );
  }
}

class ChartApp 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 ? <NewChart />: null}
      </div>
    );
  }
};

export default React.createClass({
  render: function () {
    return (
      <div>
        <ChartApp>
        </ChartApp>
      </div>
    )
  }
});

Answer 1

当前，您正在使用将单个标志设置为true的按钮，然后在该标志为true时呈现组件。 如果要渲染多个组件，则需要状态的某些方面与要渲染的组件数量有关，然后基于该渲染。 例如，正如您提到的那样，如果您使用数组或计数器变量，则可以使用.map甚至是for循环来呈现多个组件。 现在，您只要求React有条件地呈现单个NewChart组件。

Answer 2

问题是，你是不是增加新的项目，而只是呈现或不依赖于价值的checked 。 诀窍是每次单击按钮时都有一组要渲染的元素并添加一个以上的元素。

这里有一个工作示例：

import React from 'react';
import './App.css';

class NewChart extends React.Component {
  render() {
    return (
      <div key={this.props.key}>Text</div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        Add chart
          </button>
    );
  }
}

class ChartApp extends React.Component {
  constructor() {
    super();
    this.state = {
      elements: []
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    var newArray = this.state.elements.slice();
    newArray.push(<NewChart key={this.state.elements.length + 1}/>);
    this.setState({
      elements: newArray
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.elements.map((elem) => {
          return elem;
        })}
      </div>
    );
  }
}

class App extends React.Component {
  render () {
    return (
      <div>
        <ChartApp />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)