Javascript 同时将相同的道具传递给子元素

因为原来的源代码太大了。我不能发布它，让我再给你一个简短的例子

父级（ES6类组件）

render（）{
const{sortKey，isactive}=this.state；
返回(
)
}

---

为了简单起见，我只编写了4个排序组件。正如您所看到的，所有排序组件都具有相同的cKey属性。React是否有一种简单的方法将此属性一次传递给所有排序组件？

您可以使用类似于

return (
    [{title: 'A', name: "Title"}, { title: 'B',  name: "Author"}, {title: 'C', name: "Comment"},{ title: 'D',  name: "Point"}].map((obj) => {
         return <Sort key={obj.title} cKey={sortKey} title={obj.title} name={obj.name}/>
    })

)

返回(
[{title:'A'，name:'title'}，{title:'B'，name:'Author'}，{title:'C'，name:'Comment'}，{title:'D'，name:'Point'}.map（（obj）=>{
返回
})
)

实际上需要一张标题和姓名的地图：

titleNameMap = new Map([
  ['A', 'Title'],
  ...
]);
// or since `Map`-specific features aren't in use, `Map` could be skipped:
titleNameMap = [
  ['A', 'Title'],
  ...
];

render(){
    const { sortKey, isactive } = this.state;
    return (
        [...titleNameMap].map(([title, name]) => <Sort cKey={sortKey} title={title} name={name} />);
    )
}

titleNameMap=新地图([
['A'，'Title']，
...
]);
//或者，由于没有使用特定于“地图”的功能，因此可以跳过“地图”：
标题名称映射=[
['A'，'Title']，
...
];
render（）{
const{sortKey，isactive}=this.state；
返回(
[…titleNameMap].map（（[title，name]）=>）；
)
}

正如您所看到的，所有排序组件都具有相同的cKey属性。React是否有一种简单的方法将此属性一次传递给所有排序组件

React是一种极简主义和无偏见的产品，它不能解决这种情况。推荐的方法是使用高阶组件（HOC）：

constwithsortkey=（WrappedComponent，sortKey）=>props=>(
));
...
render（）{
const{sortKey，isactive}=this.state；
const KeyedSort=withSortKey（排序，sortKey）；
返回(
[…titleNameMap].map（（[title，name]）=>）；
)
}
...

谢谢。如果排序元素中有2个以上的道具怎么办。我更新了问题。如果需要将相同的值传递给组件，您可以像cKey一样将其直接传递给映射组件，但是如果它不同，您可以将数组转换为对象数组，然后再次呈现伊托克谢谢，您介意用当前问题更新您的答案吗？而不是您@Shubham Khatri，但是React有简单的方法来做到这一点吗？React提供了一种您可以使用的上下文方法，但不建议仅将其用于传递propsThank you@estus。带有动态道具的HOC解决了我的问题。

titleNameMap = new Map([
  ['A', 'Title'],
  ...
]);
// or since `Map`-specific features aren't in use, `Map` could be skipped:
titleNameMap = [
  ['A', 'Title'],
  ...
];

render(){
    const { sortKey, isactive } = this.state;
    return (
        [...titleNameMap].map(([title, name]) => <Sort cKey={sortKey} title={title} name={name} />);
    )
}

const withSortKey = (WrappedComponent, sortKey) => props => (
  <WrappedComponent cKey={sortKey} {...props} />
));

...
render(){
    const { sortKey, isactive } = this.state;
    const KeyedSort = withSortKey(Sort, sortKey);
    return (
        [...titleNameMap].map(([title, name]) => <KeyedSort title={title} name={name} />);
    )
}
...