javascript - 如何递归地将 props 注入(inject)树中的每个 React 组件？

Question

所以，我已经使用 emotion-js 一段时间了，我喜欢它!但我真的很讨厌 e2e 测试。所有选择器看起来像这样:div > div > div > p，因为 emotion 注入(inject)类名，它们是随机生成的字符串。所以我想到用 DisplayName 向每个元素注入(inject) data- 属性，以便能够以更干净的方式测试它们:[data-test-id*="DateButton"] 或类似的东西。所以我写了这个简单的包装器: https://gist.github.com/sergeyvlakh/3072a4e2e27456bda853a1e1a213a568

我是这样使用它的:

import Injector from './injector';

export default props => 
    (
        <Injector>
            <MyReactTree />
        </Injector>
    )

这里的问题是我没有“动态地”注入(inject)数据属性。我想像使用 recompose 中的任何 HoC 一样使用它:导出默认注入(inject)器(App)

或者甚至使用动态 prop 名称，如:export default Injector('data-test-id')(App)。但是...Injector 的 child 在那种情况下将是未定义的，所以我不知道如何继续:)

更新:感谢 remix23 我这样做了:https://gist.github.com/sergeyvlakh/f99310cdef018c06451333a36e764372

不过我强烈推荐使用他的代码。

Answer 1

您可以使用 React.cloneElement(element, newPropsToMerge, newChildren) 将 props 注入(inject)任何 React 元素

您可以通过访问每个元素的子元素等来递归地深入跟踪子元素。

也许成本更高但更直接，这也应该有效:

    function Injector(Target) {
         class InjectedTarget extends Component {
              render() {
                  const { chilren, ...rest } = this.props;
                  return (
                      <Target
                          data-test-id={Target.DisplayName}
                          {...rest}
                      >
                          {React.Children.map(children, (child) => {
                              const isComponent = 
                                  child &&
                                  child.type &&
                                  typeof child.type !== 'string' && 
                                  Object.prototype.isPrototypeOf.apply(
                                      React.Component.prototype,
                                      [child.type.prototype]
                                  );
                              if (!isComponent) {
                                  return child;
                              }
                              return React.createElement(Injector(child.type), { ...child.props, 'data-test-id': Target.DisplayName });
                          })}
                      </Target>
                  );
              }
         }
         return InjectedTarget;
    }

我认为这将是非常明智的性能，但这是为了测试，对吧？