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

Question

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

** file.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

您可以使用<MyComponent />

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

在app.js中

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

Answer 2

我不是一个顽固的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
}

希望这会有所帮助

Answer 3

您可以先将element定义为const / var或其他任何形式。然后，您使用element.attributes访问元素的属性，并像这样遍历属性：

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

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

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

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