Question

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

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

假设我在小时候添加了另一个随机组件：

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

结果HTML将是这样的：

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

我知道使用React.Children我可以为子组件添加新的道具，但我真正想做的是将自定义属性添加到任何随机子项的结果HTML中，具有以下内容：

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

将生成以下内容：

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

有没有办法实现这个目标？为孩子添加道具不起作用，因为孩子们的班级不知道新的道具，他们会忽略它们。

Answer 1

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

但你可以使用ReactDOM.findDOMNode做一些hackery。

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

然后在componentDidMount和componentDidUpdate事件上附加挂钩，使用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>)
  }
}

React：我可以在子项的结果HTML中添加属性吗？

1 个答案: