Question

我有一个HTML页面，我作为一个组件插入Reactjs。我正在使用JavaScript vanilla读取DOM，我想将它插入到这个新的反应脚本中。

<HTML>
<div id="element">the value I want</div>
<div id="root"></div>
</HTML>

div id“root”是插入反应的位置我想玩DOM中的“值”，但在React内部

我可以这样做吗？如何

Answer 1

看起来您可以在初始渲染之前将其添加到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')
);

<强> DEMO

Answer 2

如果您将其作为道具传递，您的组件将不再依赖于DOM的结构，使其更具可重用性和可测试性：

const value = document.getElementById('element').value;

ReactDOM.render(
  <App value={value}>,
  document.getElementById('root')
);

或如Juan Mendes所述，将elementId作为道具传递。

Answer 3

你需要的就是这个

<div ref={(ref) => { this.myDiv = ref; }}  />

然后你可以通过它获得你想要的东西。

this.myDiv

如何在反应React组件中插入DOM值？

3 个答案: