这是我第一次剪辑
export default class Form extends Component {
renderResult(result) {
return (
<span key={result.id}>{result.id}</span>
)
}
render() {
const { entity, results } = this.props.response;
return (
<div key="result" className="row">
{results.map(
(result) => this.renderResult(result)
)}
</div>
);
}
它按我的预期工作。在我的输出中,我可以看到许多 <span/>
生成。
因为我需要根据result
以不同的方式显示结果的数组内的顺序,我想将索引变量传递到渲染函数中。我尝试切换到forEach
export default class Form extends Component {
renderResult(idx, result) {
// if idx then do this else ...
return (
<span key={result.id}>{result.id}</span>
)
}
render() {
const { entity, results } = this.props.response;
return (
<div key="result" className="row">
{results.forEach(
(response, idx) => this.renderResult(idx, response)
)}
</div>
);
}
但是,在此版本中,它无法输出任何 span
元素。
为什么会有差异?
最佳答案
.forEach
的返回类型为 undefined
。回调返回的值将被简单地丢弃。
.map
的返回类型为 Array
。回调返回的值被收集到一个数组中。
如果 .forEach
将索引作为参数,但 .map
没有,这是不正确的。两者都采用 function(item, index, items){
.
关于javascript - 为什么 forEach 和 map 在 jsx 中的行为不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34504175/