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

Question

救命!我正在做 React + Laravel 6。我想将一个字符串传递给 React 组件中的 props，但这必须从 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 标记的 native 属性并在 JS 组件内获取它，但我知道这对于 React 组件是可能的。

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

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

Answer 1

您可以首先将您的元素定义为const/var或其他。然后，您可以使用 element.attributes 访问元素的属性，并像这样迭代您的属性:

const element = document.getElementById('MyComponent');

ReactDOM.render(
    <MyComponent {...element.attributes} />,
    element
);

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

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