React - 使用根元素上的数据将参数传递给应用程序

Question

我有一个反应应用程序的奇怪用例，我想根据我们安装反应应用程序的元素上的参数为应用程序提供根 URL。

ReactDOM.render(<MyGoodApp />, document.getElementById('root'));

在 HTML DOM 我有

<div id="root" data-param="https://website.biz/api/"></div>

我在涵盖此案例的文档中找不到任何内容。由于业务限制，我在部署此应用程序时受到限制，因此需要以这种方式或可能的类似方式传递值。该值将是动态的。

Answer 1

只需执行您通常从 DOM 获取属性的操作，获取其属性并将其作为 prop 发送到 React 组件

class App extends React.Component {
  render() {
    return <div>{this.props.message}</div>
  }
}

const el = document.getElementById('root');

ReactDOM.render(<App message={el.getAttribute('data-param')} />, el)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" data-param="https://website.biz/api/"></div>

React - 使用根元素上的数据将参数传递给应用程序

React - Pass parameter to app with data on root element

html

reactjs

react-dom