如何在 React React 组件中插入 DOM 值？答案

【问题标题】：How to insert a DOM value in a react React component?如何在 React React 组件中插入 DOM 值？
【发布时间】：2017-12-19 15:38:25
【问题描述】：

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

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

div id "root" 是插入 react 的位置我想使用 DOM 中的“值”，但在 React 内部

我可以吗？如何

【问题讨论】：

标签： javascript reactjs

【解决方案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

【讨论】：

为了使其更易于重用，我建议采用元素的 id（或元素本身）而不是硬编码
@JuanMendes，喜欢吗？

【解决方案2】：

如果你将它作为一个 prop 传递，你的组件将不会依赖 DOM 的结构，从而使其更具可重用性和可测试性：

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

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

或者如 Juan Mendes 所说，将 elementId 作为 prop 传入。

【讨论】：

【解决方案3】：

你只需要这个

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

然后你就可以从中得到你想要的任何东西。

this.myDiv

【讨论】：

这不是只有在元素位于 React 应用程序中时才有效吗？ OP 要求不同的东西。