javascript - 如何在 React React 组件中插入 DOM 值?

标签 javascript reactjs

我有一个 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 内部

我可以吗?如何

最佳答案

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

关于javascript - 如何在 React React 组件中插入 DOM 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47890380/

相关文章:

css - 如何覆盖样式组件中的 GlobalStyles?

reactjs - 为什么 chrome 开发工具控制台会在一个网站上显示 Post 500 错误的链接,而在另一个网站上却没有?

javascript - Access-Control-Allow-Origin 不起作用 Google Cloud Functions GCF

javascript - 使用 JAVAScript 从 Phonegap 应用程序向 DJANGO 提交表单

javascript - Immutable.js mergeDeepWith 问题

javascript - 确保纯 Ajax/Javascript 客户端的安全

javascript - 如何在 React js 中设置响应式样式以响应模态?

javascript - React.js数据流范例-data.props,state和JSX有何好处?

reactjs - Next.js/MSAL : Text does not match server-rendered html

javascript - 带有 JavaScript 选择选项的列表元素