有条件的渲染反应问题(循环)

Question

i试图使用foreach或映射功能而没有成功（XXX不是函数错误）。决定使用Good Old进行循环，但我没有创建多个DIV元素，而我的程序只会渲染一个。

简化的示例：

getTest(){
    const l = this.props.renderedDrugs.length;
    for(var i = 0; i < l; i++){
        return <div>{this.props.renderedDrugs[i].id}</div>
    }
}
render() {
    const test = (this.props.renderedDrugs) ? this.getTest() : nope()
    function nope(){
        return 'nope'
    }
    return (
        <div>{test}</div>
    )
}
}

无论我做什么，我都无法返回多个Div，但是对于多个控制台日志没有问题。我是否错过了基本反应功能的至关重要的东西，因为像白痴一样盯着屏幕，我完全忘记了？

Answer 1

您确实想要map：

getTest() {
    return this.props.renderedDrugs.map(rd => <div>{rd.id}</div>)
}

仅一个渲染的原因是因为return <div>{this.props.renderedDrugs[i].id}</div>知道，从函数返回该值。map更干净，但您可以使用循环和一个数组模拟地图：

getTest(){
    const l = this.props.renderedDrugs.length;
    const ary = [];
    for(var i = 0; i < l; i++){
        ary.push(<div>{this.props.renderedDrugs[i].id}</div>);
    }
    return ary;
}