Question

由于原始源代码太大。我无法发布它，让我再举一个简短的例子。

父级（ES6类组件）

render(){
    const { sortKey, isactive } = this.state;
    return (
        <Sort cKey={sortKey} title="A" name="Title" />
        <Sort cKey={sortKey} title="B" name="Author" />
        <Sort cKey={sortKey} title="C" name="Comment" />
        <Sort cKey={sortKey} title="D" name="Point" />
    )
}

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

Answer 1

您无需使用单独的“排序”组件，而只需使用类似地图的地图即可

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}/>
    })

)

Answer 2

实际上需要标题和名称的映射：

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} />);
    )
}

如您所见，所有Sort组件都具有相同的cKey属性。 React是否有简单的方法可以立即将此属性传递给所有Sort组件？

React极简且不受限制，它无法解决此类情况。推荐的方法是使用高阶分量（HOC）：

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} />);
    )
}
...

一次将相同的道具传递给子元素

2 个答案: