反應：我可以添加屬性到兒童的最終HTML？

我有一個封裝其他組件的組件：反應：我可以添加屬性到兒童的最終HTML？

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我可以將新的道具添加到子組件，但我真正想要做的是將自定義屬性添加到res任何隨機的孩子ultant HTML，有這樣的事情：

會生成以下：

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

有沒有辦法來實現這一目標？給孩子添加道具是行不通的，因爲兒童班不知道新的道具，他們忽視它們。

來源

2016-06-22 Pablo Lozano

不知道你爲什麼需要這個，我建議你去重新考慮一下你的架構。

但是你可以使用ReactDOM.findDOMNode做一點點的駭客。

首先，您需要爲每個子組件設置參考。通過克隆元素並分配參考。

然後掛上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>) 
    } 
}

來源

2016-06-22 12:46:10

主要原因是因爲我想使用這個工具提示庫：https://www.npmjs.com/package/react-tooltip它需要標記將顯示工具提示的元素。我不想將所需的道具添加到我們已經創建的每個組件中，並且我正在尋找不同的方法。所以感謝你的解決方案和你的建議：我會試着找到另一種方法（它已經在工作的一個方法是將孩子包裝在一個具有所需數據屬性的div中，但我不喜歡它，它也好像很難看） –

反應：我可以添加屬性到兒童的最終HTML？

回答

相關問題