Question

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

但是我想要做的是将n个自定义Option组件的集合作为子组件组成，这些组件将在组件的render方法期间使用：

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

但是我很挣扎，无法找到有关此渲染组件上下文的大量文档

由于jsx的存在，这项工作是否有意义？

Answer 1

如果每个元素都有一个独特的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>

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

1 个答案: