Question

我正在尝试渲染几个不同的组件并通过映射传递它的道具。 <li>...</li>包含一系列正在传递的信息。

componentInfo

在我的React组件中，我希望通过单击按钮生成这些组件，并触发displayComponent() { this.state.componentInfo.map(info => { return ( <SomeComponent info={info}/> ) }) }函数。

displayComponent

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

Answer 1

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

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

然后你可以填充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>

无法基于函数呈现组件

1 个答案: