如何在React React組件中插入DOM值？
[英]How to insert a DOM value in a react React component?
問題描述
我有一個HTML頁面，並且正在將Reactjs作為組件插入其中。 我正在閱讀具有JavaScript vanilla的DOM，並且希望將其插入此新的react腳本中。
<HTML>
<div id="element">the value I want</div>
<div id="root"></div>
</HTML>
div id“ root”是我要與DOM中的“ value”一起播放的React插入的位置，但是在React中
我可以做嗎？ 怎么樣
3 個解決方案
解決方案1
3 2017-12-19 15:56:02
看起來您可以在初始渲染之前將其添加到componentWillMount 。
的HTML
<div id="element">the value I want</div>
<div id="root"></div>
JSX
class Test extends React.Component {
componentWillMount() {
const { element } = this.props;
this.text = document.getElementById(element).textContent;
}
render() {
return <div>{this.text}</div>;
}
}
ReactDOM.render(
<Test element="element" />,
document.getElementById('root')
);
解決方案2
2 已采納 2017-12-19 15:58:26
如果將其作為道具傳遞，則您的組件將不會依賴DOM的結構，從而使其更具可重用性和可測試性：
const value = document.getElementById('element').value;
ReactDOM.render(
<App value={value}>,
document.getElementById('root')
);
或正如胡安·門德斯（Juan Mendes）所述，將elementId傳遞為道具。
解決方案3
0 2017-12-19 16:04:41
您需要的就是這個
<div ref={(ref) => { this.myDiv = ref; }} />
然后，您可以從中獲得想要的一切。
this.myDiv
如何動態地將React組件插入DOM（例如對話框）？
[英]How do you dynamically insert a React component into the DOM (for instance a dialog)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.