javascript - 在 reactjs 中的组件组合期间使用 .map
问题描述
我可以完全渲染以下内容:
<Select
defaultValue=''
>
<Option value='' />
<Option value='one' />
<Option value='two' />
</Select>
但我想要做的是将 n 个自定义 Option 组件作为子组件组成的集合,这些组件将在组件的渲染方法期间使用:
<Select
defaultValue=''
>
{
this.props.optionValues.map((value, i) =>
<Option key={i} value={value} />
)
}
</Select>
但是我很挣扎,找不到很多关于渲染组件上下文的文档
由于 jsx 的方式,这是否有效或没有意义?
解决方案
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>
推荐阅读
- c++ - 如何在没有定义的情况下实现 boost 运算符
- java - 如何从同一类中的另一个方法返回主方法(中断不起作用)
- python - 为什么在批量预测时,Tensorflow(和 Keras)上的每个样本预测时间比对单个样本的预测时间要短?
- excel - 单元格更改未触发 VBA 宏
- wordpress - 在手表更改时重置 VueJS 分页
- python - 为什么 np.nan_to_num() 不转换这个 (nxm) 数组?
- c# - Azure Service Fabric:有状态分片
- html - 是否可以在 Wordpress 上编辑 index.html?
- lambda - 将 Java lambda 转换为 kotlin
- ruby-on-rails - 将 Rails 会话存储从 cookie 切换到缓存:InvalidAuthenticityToken