时间戳

首页 > 解决方案 > 组件内的人口数组

javascript - 组件内的人口数组

问题描述

所以我有以下父组件。

class IndecisionApp extends React.Component {
    render() {

        const options = ['Thing one', 'Thing two', 'Thing three']

        return (
            <div>
                <Options options={options} />
            </div>
        )
    }
}

如您所见，我在渲染函数中定义了一个名为 Options 的组件。在那个组件中，我传递了一个名为 options 的参数。我的目标是在 Options 组件中填充该选项数组。所以这就是我正在做的。

class Options extends React.Component {
    render() {
        console.log(this.props.options)
        return (
            <div>
                {
                    this.props.options.forEach((o) => {
                        return <p key={this.props.options}>{o}</p>
                    })
                }
            </div>
        )
    }
}

但是，我在输出中看不到任何内容。这是为什么？我做错什么了？

谢谢，西奥。

标签： javascriptreactjs

解决方案

您需要map返回 JSX 元素数组的选项，forEach而不返回数组。请记住，反应键必须是唯一的。

列表和键

class Options extends React.Component {
  render() {
    console.log(this.props.options)
    return (
      <div>
        {
          this.props.options.map((o) => {
            return <p key={o}>{o}</p> // <-- keys should be unique in dataset
          })
        }
      </div>
    )
  }
}

推荐阅读