javascript - react : Can I add attributes to children's resultant HTML?

Question

我有一个包装其他组件的组件:

class MyComp extends React.Component {
  render() {
    return <div> {this.props.children} </div>
  }
}

假设我添加了另一个随机组件作为 child :

<MyComp><FancyP>Hello</FancyP></MyComp>

生成的 HTML 应该是这样的:

<div>
  <p class="fancy">Hello</p>
</div>

我知道使用 React.Children 我可以向子组件添加新的 Prop ，但我真正想做的是将自定义属性添加到任何随机子组件的结果 HTML 中，比如这个:

<MyComp childAttr={{'data-x':'value'}}><FancyP>Hello</FancyP></MyComp>

将生成以下内容:

<div>
  <p class="fancy" data-x="value">Hello</p>
</div>         

有办法实现吗？向 child 添加 Prop 不起作用，因为 child 的类(class)不知道新 Prop ，他们会忽略它们。

Answer 1

不确定您为什么需要这个，我建议您在为时已晚之前重新考虑您的架构。

但是您可以使用 ReactDOM.findDOMNode 进行一些黑客操作。

首先，您需要为每个子组件设置 refs。通过克隆元素并分配一个 ref。

然后在 componentDidMount 和 componentDidUpdate 事件上附加 Hook ，使用 findDOMNode 查找 dom 元素并手动填充数据集。 DEMO .

import React, { Component, Children, cloneElement } from 'react'
import { render, findDOMNode } from 'react-dom'

class MyComp extends Component {
  componentDidMount() {
    this.setChildAttrs()
  }

  componentDidUpdate() {
    this.setChildAttr()
  }

  setChildAttrs() {
    const { childAttrs } = this.props
    const setAttrs = el => Object.keys(childAttrs)
      .forEach(attr => el.dataset[attr] = childAttrs[attr])

    // for each child ref find DOM node and set attrs
    Object.keys(this.refs).forEach(ref => setAttrs(findDOMNode(this.refs[ref])))
  }

  render() {
    const { children } = this.props
    return (<div> {
        Children.map(children, (child, idx) => {
          const ref = `child${idx}`
          return cloneElement(child, { ref });
      })} </div>)
  }
}