javascript - 在 reactjs 中的组件组合期间使用 .map

标签 javascript reactjs components

我可以完全渲染以下内容:

    <Select
      defaultValue=''
    >
        <Option value='' />
        <Option value='one' />
        <Option value='two' />
    </Select>

但我想做的是将 n 个自定义选项组件组成一个集合作为将在组件的渲染方法期间使用的子组件:

    <Select
      defaultValue=''
    >
        {
          this.props.optionValues.map((value, i) =>
            <Option key={i} value={value} />
          )
        }
    </Select>

但是我很挣扎,找不到很多关于这种渲染组件上下文的文档

由于 jsx 的特性,这是否有效或没有意义?

最佳答案

如果每个元素都有一个唯一的 key Prop ,就像您在问题中概述的那样,将数组渲染为子项是完全有效的。假定您的 this.props.optionValues 数组看起来像 ['', 'one', 'two'] 它会正常工作。

示例

function App(props) {
  return (
    <div>
      <select>
        <option value="">Pick number</option>
        <option value="one">One</option>
        <option value="two">Two</option>
      </select>
      <select>
        <option value="">Pick number</option>
        {props.optionValues.map((value, i) => (
          <option key={i} value={value}>
            {value}
          </option>
        ))}
      </select>
    </div>
  );
}

ReactDOM.render(
  <App optionValues={["one", "two"]} />,
  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>

关于javascript - 在 reactjs 中的组件组合期间使用 .map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51776195/

相关文章:

java - 使用 @Component 给出属性名称/值

c# - 使用 ajax 从 C# 获取 JavaScript 对象

javascript - 使用javascript验证数字输入

javascript - 如何在 D3 圆圈内居中列表

javascript - kendo-ui:网格中带有三元运算符的自定义模板

javascript - 单击外部时关闭 reactstrap 模态

reactjs - 更新嵌套对象时 UseState 不重新渲染

reactjs - 如何在另一个函数中使用 useEffect() 中声明的变量?

delphi - 使用frame2访问frame1的组件,其中frame2在frame1上,在delphi中,动态创建帧

带值的 Angular 属性组件