代码之家 › 专栏 › 技术社区 › Coty Embry

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

components reactjs javascript

Coty Embry · 技术社区 · 6 年前

我可以把下面的内容做得很好:

    <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是如何工作的,这是否有意义?

1 回复 | 直到 6 年前

Tholle 6 年前

如果每个元素都有唯一的 key 就像你在问题中描述的那样。当然你的 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>