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

帮助!我正在做 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 中的文本进行硬编码,但组件不能重用并且会破坏组件化。


蝴蝶不菲
浏览 85回答 3
3回答

翻翻过去那场雪

您可以将您的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}

江户川乱折腾

您可以使用<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'));

蛊毒传说

我不是核心 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}希望这可以帮助
打开App,查看更多内容
随时随地看视频慕课网APP