我有一个HTML页面，我作为一个组件插入内部Reactjs。我正在使用JavaScript vanilla读取DOM，我想将它插入到这个新的反应脚本中。
<HTML>
<div id="element">the value I want</div>
<div id="root"></div>
</HTML>
div id“root”是插入react的地方我想用DOM中的“value”来玩，但是在React里面
我可以做吗？怎么样
如果您将其作为道具传递，您的组件将不依赖于DOM的结构，使其更具可重用性和可测试性：
const value = document.getElementById('element').value;
ReactDOM.render(
<App value={value}>,
document.getElementById('root')
);
或者如Juan Mendes所提到的那样，将elementId作为道具传递。
看起来你可以在初始渲染之前将它添加到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')
);
你只需要这个
<div ref={(ref) => { this.myDiv = ref; }} />
然后你可以得到你想要的东西。
this.myDiv