Question

请查看以下代码段：

class Placeholder extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

class Wrapper extends React.Component {
  render() {
    const childs = React.Children.map(this.props.children, (child, idx) => {
      return React.cloneElement(child, {
        title: this.props.conf[child.props.name]
      });
    });
    return <div>{childs}</div>
  }
}

function App() {
  const conf = {
    "1": "test1",
    "2": "test2",
  };
  return (

    <div className="App">
      <Wrapper conf={conf}>
        <Placeholder name="1" />
        <Placeholder name="2" />
      </Wrapper>
    </div>
  );
}

（链接：https://codesandbox.io/s/93wwyz05ry）

在这里我有一个Wrapper和一个Placeholder组件。您可以将占位符放在Wrapper组件中; Wrapper将收到一个配置道具，其中包含包装的占位符组件的信息。 Placeholder组件通过提供名称来引用相关的配置值。（请记住：这个例子没有多大意义，但应该只展示基本的想法;你可以把它想象成模板引擎）

如果占位符是Wrapper的直接子项，那么这项工作非常好，但我想要实现的是，我还可以在Wrapper中深入嵌套占位符组件。所以这样的事情也应该是可能的：

<Wrapper conf={conf}>
    <div>
         <Placeholder name="1" />
    </div>
    <Placeholder name="2" />
</Wrapper>

为实现这一目标，我现在可以考虑两种选择：

在Wrapper组件中创建一个递归函数，它只循环遍历所有子项，孙子项等。
更改过程：向Wrapper添加一个函数，该函数作为参数占位符组件和特定配置，并返回已扩展的占位符组件。（~HOC方法）

对于我猜测的性能，数字1可能非常糟糕。

2号可以使用，但我并不喜欢它，因为我宁愿保留所有内容和＃34;，就像目前的基本构思/结构一样。

我对性能问题是对的，还是不会太糟糕？你还有其他想法吗？

扩展包裹组件道具的最佳做法

0 个答案: