反应：我可以添加属性到儿童的最终HTML？ [英] React: Can I add attributes to children's resultant HTML?

问题描述

  class MyComp extends React.Component {
 render（） {
 return< div> {this.props.children}< / div> 
 
 
 
 
 $ b 
假设我将另一个随机组件添加为一个子组件： 
 < MyComp>< FancyP> Hello< / FancyP>< / MyComp> 
  
由此产生的HTML将如下所示：
 < DIV> 
< p class =fancy'> Hello< / p> 
< / div> 
  
我知道使用 React.Children 我可以向子组件添加新的道具，但是我真正想要做的是将自定义属性添加到任何随机孩子的结果HTML，如下所示：
 < MyComp childAttr = {{'data-x'：'价值'}}>< FancyP> Hello< / FancyP>< / MyComp> 
  
会生成以下内容：
 
 
 < div> 
< p class =fancy'data-x ='值'>你好< / p为H. 
< / div> 
  
有没有办法做到这一点？向儿童添加道具不起作用，因为儿童班级不知道新的道具，并且他们忽略了它们。    确定为什么你需要这个，我建议你重新考虑你的架构，以免太迟。
 
 
但是你可以做一点hackery使用 ReactDOM.findDOMNode 。  
 
 
首先，您需要为每个子组件设置参考。通过克隆元素并分配参考。然后在 componentDidMount 和 componentDidUpdate 事件上附加钩子，使用 findDOMNode 查找dom元素并手动填充数据集。  DEMO 。
  import'react'，{Component，Children，cloneElement} from'react'
从'react-dom'导入{render，findDOMNode} 
 $ b $ 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]）
 
 //为每个子查找DOM节点并设置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>）
} 
} 
  
 
I have a component that wraps other components:
class MyComp extends React.Component {
  render() {
    return <div> {this.props.children} </div>
  }
}
Let's say I add another random component as a child:
<MyComp><FancyP>Hello</FancyP></MyComp>
The resultant HTML would be like this:
<div>
  <p class="fancy'>Hello</p>
</div>
I know that using React.Children I could add new props to the child component, but what I really want to do is add custom attributes to the resultant HTML of any random child, having something like this:
<MyComp childAttr={{'data-x':'value'}}><FancyP>Hello</FancyP></MyComp>
that would generate the following:
<div>
  <p class="fancy' data-x='value'>Hello</p>
</div>
Is there a way to achieve this? Adding a props to the children does not work because children's classes are not aware of the new props and they ignore them.
解决方案
Not sure why you need this and I do recommend you to rethink your architecture before it is too late.

But you can do a little bit of a hackery using ReactDOM.findDOMNode. 

First you need to set refs for every child component. By cloning element and assigning a ref. 

Then attach hooks on componentDidMount and componentDidUpdate events, find dom element using findDOMNode and manually populate dataset. 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>)
  }
}


                        
这篇关于反应：我可以添加属性到儿童的最终HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！