如何在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.