Javascript “反应”按钮不会渲染多次

我有一个用于呈现新组件的按钮（实际上是图表，我简化了示例以仅显示文本），它在第一次单击页面时将文本添加到页面中，但在进一步单击时不会将任何新文本对象添加到页面中

我已经测试过，当我多次按下该函数时，它是否真的在运行，方法是让它向数组中添加元素，而它确实是这样做的，那么为什么它在多次单击时不向页面呈现新的文本对象呢

我可能遗漏了一些基本的东西，如果有任何解释，我将不胜感激

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

从“React”导入React；
导入“/App.css”；
类NewChart扩展了React.Component{
render（）{
返回(
正文
);
}
}
类按钮扩展了React.Component{
render（）{
返回(
添加图表
);
}
}
类ChartApp扩展了React.Component{
构造函数（）{
超级（）；
此.state={
单击：false
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
点击：对
});
}
render（）{
返回(
{this.state.clicked？：null}
);
}
};
导出默认的React.createClass({
渲染：函数（）{
返回(
)
}
});

您当前正在使用一个按钮，该按钮将单个标志设置为true，然后在该标志为true时呈现组件。如果要渲染多个组件，则需要状态的某些方面与要渲染的组件数量相关，然后基于该方面进行渲染。例如，如您所述，如果使用数组或计数器变量，则可以使用

.map

或For循环来渲染多个组件。现在您只要求React有条件地呈现单个NewChart组件。

问题在于您没有添加新项目，而只是呈现或不呈现取决于选中的

值。诀窍是让一个元素数组进行渲染，并在每次单击按钮时再添加一个元素

这里有一个工作示例：

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')
)

从“React”导入React；
导入“/App.css”；
类NewChart扩展了React.Component{
render（）{
返回(
正文
);
}
}
类按钮扩展了React.Component{
render（）{
返回(
添加图表
);
}
}
类ChartApp扩展了React.Component{
构造函数（）{
超级（）；
此.state={
要素：[]
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
var newArray=this.state.elements.slice（）；
newArray.push（）；
这是我的国家({
元素：newArray
});
}
render（）{
返回(
{this.state.elements.map（（elem）=>{
返回元素；
})}
);
}
}
类应用程序扩展了React.Component{
渲染（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)
所以基本上我一直按下一个按钮？更像是告诉React“如果这个变量为真，则渲染这一件事。当我单击此按钮时，将其设置为真。”你想要的是类似“渲染此组件
n
次，当我单击此按钮时，递增
n
”的内容，我想我现在明白了，谢谢你快速而准确的回答！很抱歉反应太晚。虽然我已经解决了这个问题，但感谢这个好例子，它似乎在我的应用程序中也能很好地工作，而且代码似乎比我设法拼凑的要少！别担心！！我很高兴帮助你！！如果行得通，你介意投赞成票吗？谢谢不行，我需要15个代表，这是我还没有的，对不起！尽管如此，还是对它投了赞成票，但表示不会改变宣传，不管它是如何录制的。