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组件

＆＃13;

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)

＆＃13;

<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>

＆＃13;

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

1 个答案: