ReactJS参数使用疑问：为何函数参数keyword无法正常生效？

你的代码里datan.keyword是直接访问datan对象中名为"keyword"的固定属性，而不是使用函数参数keyword的变量值作为属性名去取对应的值，这就是参数keyword无法生效的核心原因。

解决步骤 #

把点语法改成方括号语法，因为方括号内可以传入变量，这样就能根据函数参数keyword的值动态访问datan对象的对应属性：

function FillData(keyword) {
    return <div className="App">
                {
                    Data.map(datan => {
                        return(
                            <div className="box" key={datan.id}> {/* 建议添加唯一key，避免React警告 */}
                                {datan[keyword]}
                            </div>
                        )
                    })
                }
    </div>
}

额外注意事项 #

• 确保Data数组中的每个对象都包含你传入的keyword对应的属性，否则会渲染undefined
• React列表渲染时必须给每个子元素添加唯一的key属性，推荐使用数据中自带的唯一标识（比如id），不要用数组索引作为key

内容的提问来源于stack exchange，提问作者syez-code