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

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 文件不能像在 JS 中那样在blade.php 文件中输入<MyComponent /> ，而 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
}

希望这可以帮助