如何使用 HTML 元素属性将数据从 Blade.php 文件传递​​到反应组件？

Question

帮助！我正在做 React + Laravel 6。我想将一个字符串传递给我的 React 组件中的道具，但这必须从 file.blade.php 文件传递/写入。

** 文件.blade.php **

<div id="MyComponent"></div>

<div id="MyComponent"> string I want to pass</div>我无法得到这个 innerHTML 以及 ID 已经被标记。

<div id="MyComponent" customProp="string to I want to pass"></div>我不确定是否可以使用自定义属性或 HTML 标记的本机属性并在 JS 组件中获取它，但我知道这对于 React 组件是可能的。

我知道 php 文件不能<MyComponent />像我在 JS 中那样在 Blade.php 文件中输入，而 php 文件只能通过 ID 标签使用组件。请不要建议fetch，我知道它会解决这个问题，但是为了达到预期的效果，这个过程不必要地更长，只是为了显示。我宁愿在 HTML 中硬编码这个组件。

期望的效果：我希望这个 React 组件根据传递的字符串调整它的文本。我可以简单地对 JS 中的文本进行硬编码，但组件不能重用并且会破坏组件化。

Answer 1

您可以将您的element第一个定义为 const/var 或其他。然后你访问元素的属性element.attributes并遍历你的属性，如下所示：const element = document.getElementById('MyComponent');ReactDOM.render(&nbsp; &nbsp; <MyComponent {...element.attributes} />,&nbsp; &nbsp; element);您可以使用 访问属性this.props。如果您要传递 data-* 属性，则可以使用{...element.dataset}

Answer 2

您可以使用<MyComponent /><div id="app">&nbsp; &nbsp; &nbsp;<MyComponent customProp="string to I want to pass" /></div>在 app.js 中&nbsp;ReactDOM.render(<App />, document.getElementById('app'));

Answer 3

我不是核心 reactjs 开发人员，但我最近为使用 reactjs 开发人员构建的工具所做的事情是将我的变量作为数据属性传递，如下所示：<div id="root" data-text="blah blah">然后，查看他的源代码，我可以看到一个函数：componentDidMount(){&nbsp; &nbsp; &nbsp; //other variables here&nbsp;&nbsp; &nbsp; &nbsp; let data_text= $('#root').attr("data-text"); //get the data attribute variable}希望这可以帮助