如何使用 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(

    <MyComponent {...element.attributes} />,

    element

);

您可以使用 访问属性this.props。

如果您要传递 data-* 属性，则可以使用{...element.dataset}

Answer 2

您可以使用<MyComponent />

<div id="app">

     <MyComponent customProp="string to I want to pass" />

</div>

在 app.js 中

 ReactDOM.render(<App />, document.getElementById('app'));

Answer 3

我不是核心 reactjs 开发人员，但我最近为使用 reactjs 开发人员构建的工具所做的事情是将我的变量作为数据属性传递，如下所示：

<div id="root" data-text="blah blah">

然后，查看他的源代码，我可以看到一个函数：

componentDidMount()

{

      //other variables here 

      let data_text= $('#root').attr("data-text"); //get the data attribute variable

}

希望这可以帮助