javascript - 将自定义数据属性注入(inject) REACT `props.children`

Question

我有一个只渲染 props.children 的功能组件，但我想向它呈现的 DOM 元素注入(inject)一些自定义数据属性。

让我们看一个例子:

const Decorator = props => {
    return props.children;
}

const Child = props => {
    return <div>I'm a child</div>
}

- - -

// Suppose we have this:
<Decorator><Child /></Decorator>

// Then, the DOM output will be:
<div>I'm a child</div>

现在，根据上面的示例，我想要实现的是通过 Decorator 呈现的任何 DOM 元素。具有自定义数据属性，因此:

// Suppose we have this:
<Decorator><Child /></Decorator>

// Then, the DOM output will be:
<div data-decorator-attr="foo">I'm a child</div>

我在这里和那里搜索过，但我还没有找到执行此操作的方法。以下是我考虑过的可能性列表以及无法使用它们的原因:

• 内部<Decorator>我可以使用 React.cloneElement并注入(inject) ref至 props.children ，但是 ref会引用组件本身，而不是渲染的 DOM。我需要导出 Child元素使用 React.forwardRef但这不可行(那是因为 <Decorator> 可以包装任何东西，而且我无法将所有其他组件编辑为 React.forwardRef ；
• 作为功能组件，我什至不能使用 React.findDOMNode使用对组件本身的引用；
• 内部<Decorator> , 我可以包裹 props.children用<Fragment> ，但是 <Fragment>不支持 ref ;

所以..我不知道我怎么能做到这一点。我发现的唯一方法是在 <Decorator> 中呈现一个包装器 DOM 元素。 ，像这样:

const Decorator = props => {
    return <div style={{display: 'contents'}}>{props.children}</div>;
}

但我想要的是没有任何包装 DOM 元素。

Answer 1

我不知道这是否有帮助:

const Decorator = props => {
  const elements = React.Children.toArray(props.children).map(
    (element) => React.cloneElement(element, { 'data-decorator-attr': 'foo' })
  );
  
  return <React.Fragment>{elements}</React.Fragment>;
};

const Child = props => <div {...props}>I'm a child</div>;

const App = () => <Decorator><Child /><div>Just a div</div></Decorator>;

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我用了https://frontarm.com/james-k-nelson/passing-data-props-children/作为引用。