Question

CMS将变量作为data-rest-url属性传递给React.js App：

<div id="reactjs-root" data-rest-url="http://my-ip-addess:8080/Rest-api-here">...</div>

如果我将jQuery添加到我的React.js应用程序中，那么我可以简单地说：

 componentWillMount() {
    const $reactRoot = $('#reactjs-root');
    const restUrl = $reactRoot.attr('data-rest-url');
 }

但是为此添加jQuery？如何将一些变量从CMS传递到单页反应应用程序并使用react.js读取/解析/获取它？

Answer 1

考虑将您的数据属性作为道具传递给组件，而不是在组件本身内对根元素ID进行硬编码。

渲染：

var rootElement = document.getElementById('reactjs-root');
ReactDOM.render(
  <YourComponent resturl={rootElement.getAttribute('data-rest-url')}></YourComponent>,
  rootElement
);

在组件中，您可以访问注入的URL：

componentWillMount() {
    console.log(this.props.resturl)
}

这使得更可重用的组件与特定元素ID分离。

Answer 2

const reactRoot = document.getElementById('reactjs-root');
const restUrl = reactRoot.getAttribute('data-rest-url');

另外，请避免在变量名中使用$。如果您误将$用作变量，则可能会遇到很多库和冲突。

在react.js上下文中获取html元素的数据属性

2 个答案: