时间戳

首页 > 解决方案 > 扩展包装组件的 props 的最佳实践

javascript - 扩展包装组件的 props 的最佳实践

问题描述

请查看以下代码段：

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 组件内放置占位符；Wrapper 将收到一个配置道具，其中包括包装的占位符组件的信息。占位符组件通过提供名称来引用相关的配置值。（请记住：这个例子没有多大意义，而应该只是演示基本思想；你可以把它想象成一个模板引擎）

在占位符是 Wrapper 的直接子代的情况下，这非常有效，但我想要实现的是，我还可以将占位符组件深度嵌套在 Wrapper 中。所以像这样的事情，也应该是可能的：

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

为了实现这一点，我目前可以想到两种选择：

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

我猜第 1 位的表现可能非常糟糕。

2 号会起作用，但我不太喜欢它，因为我更愿意将所有东西“放在一起”，就像目前的基本想法/结构一样。

我对性能问题是否正确，还是不会太糟糕？你有别的想法吗？

标签： javascriptreactjs

解决方案

推荐阅读