javascript - 无法渲染基于关闭功能的组件

Question

我正在尝试渲染几个不同的组件并通过映射传递它的 Prop 。 componentInfo 包含正在传递的信息数组。

displayComponent() {
 this.state.componentInfo.map(info => {
  return (
    <SomeComponent info={info}/>
   )
 })
}

在我的 React 组件中，我希望这些组件基于单击按钮生成，并触发 displayComponent 函数。

render() {
 return (
  <div style={{ marginLeft: 20 }}>
   <RaisedButton label="DISPLAY" onClick={this.displayComponent} />
  </div>
}

但是，我无法显示组件。这是为什么？

Answer 1

您没有渲染 displayComponent，只是在点击事件时调用它。
在您的代码的当前设置中，我发现很难实现您所追求的目标，我会将状态中的对象分开:

  state = {
    showComponents: false,
    componentInfo: ['info 1', 'info 2', 'info 3'],
    components: []
  }

然后您可以填充组件数组并有条件地渲染它。

运行示例:

const SomeComponent = ({ info }) => <div>{info}</div>;

class App extends React.Component {
  state = {
    showComponents: false,
    componentInfo: ['info 1', 'info 2', 'info 3'],
    components: []
  }

  setComponents = () => {
    this.setState(state => {
      const { componentInfo } = state;
      const nextComponents = componentInfo.map(info => <SomeComponent info={info} />);
      return {
        components: nextComponents,
        showComponents: true
      }
    });
  }
  render() {
    const { showComponents, components } = this.state;
    return (
      <div>
        <button onClick={this.setComponents}>Set Components</button>
        <hr/>
        {showComponents && components}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
	<div id="root"></div>