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

huangapple go评论85阅读模式
英文:

How to pass data from blade.php file to a react component using HTML element attributes?

问题

我想在我的React组件中将一个字符串传递给我的props,但这必须从file.blade.php文件中传递/写入。

** file.blade.php **

```<div id="MyComponent"></div>```

```<div id="MyComponent">我想要传递的字符串</div>``` 我无法获取这个innerHTML,因为ID已经被标记了。

```<div id="MyComponent" customProp="我想要传递的字符串"></div>``` 我不确定是否可以使用自定义属性或HTML标签的本地属性,并在JS组件内获取它,但我知道这对于React组件是可能的。

我知道php文件不能像JS中那样在blade.php文件中键入```<MyComponent />```,php文件只能通过ID标签使用组件。请不要建议使用```fetch```,我知道它可以解决这个问题,但这个过程对于所需的效果来说太冗长,仅仅是为了显示。我宁愿在HTML中硬编码这个组件。

所期望的效果是:我希望这个React组件根据传递的字符串调整其文本。我可以在JS内部简单地硬编码文本,但组件将不可重用并且违背了组件化的原则。
英文:

HELP! I'm doing React + Laravel 6.
I want to pass a string to my props in my React component but this has to be passed/written from a file.blade.php file.

** file.blade.php **

&lt;div id=&quot;MyComponent&quot;&gt;&lt;/div&gt;

&lt;div id=&quot;MyComponent&quot;&gt; string I want to pass&lt;/div&gt; I can't get this innerHTML as well as ID is already tagged.

&lt;div id=&quot;MyComponent&quot; customProp=&quot;string to I want to pass&quot;&gt;&lt;/div&gt; I'm not sure if it is possible to use a custom property or the native property of an HTML tag and fetch it inside the JS component but I know this is possible for React components.

I know that php files can't type &lt;MyComponent /&gt; inside a blade.php file like I can in JS and php files can only use a component through ID tag. Please don't suggest fetch, i know that it would solve this problem but the process is needlessly longer for the desired effect, just for display.I'd rather hard code this component in HTML.

Desired effect: I want this React Component to adjust it's text based on the passed string. I can simply hard code the text inside JS but component wouldn't be reusable and defeat the componentization.

答案1

得分: 1

你可以首先将你的 element 定义为一个 const/var 或其他什么。然后,你可以使用 element.attributes 访问元素的属性并像下面这样迭代你的属性:

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

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

你可以使用 this.props 访问这些属性。

如果你要传递 data-* 属性,你可以使用 {...element.dataset} 来传递它们。

英文:

You can define your element first as a const/var or whatever. Then you access the element's attributes with element.attributes and iterate through your attributes like so:

const element = document.getElementById(&#39;MyComponent&#39;);

ReactDOM.render(
    &lt;MyComponent {...element.attributes} /&gt;,
    element
);

You can access the attributes with this.props.

If you're passing data-* attributes your can pass those with {...element.dataset}

答案2

得分: 0

你可以使用<MyComponent />


<div id="app">
     <MyComponent customProp="要传递的字符串" />
</div>

在 app.js 中

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

you can use &lt;MyComponent /&gt;


&lt;div id=&quot;app&quot;&gt;
     &lt;MyComponent customProp=&quot;string to I want to pass&quot; /&gt;
&lt;/div&gt;

in app.js

 ReactDOM.render(&lt;App /&gt;, document.getElementById(&#39;app&#39;));

答案3

得分: 0

我不是一名 hardcore reactjs 开发者,但最近为我与一位 reactjs 开发者合作构建的工具所做的事情是将我的变量作为数据属性传递,如下所示:

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

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

componentDidMount() {
    //其他变量在这里
    let data_text = $('#root').attr("data-text"); //获取数据属性变量
}

希望这对你有所帮助。

英文:

I am not a hardcore reactjs dev but what I did recently for a tool I built with a reactjs dev was pass in my variable as a data attribute like so:

&lt;div id=&quot;root&quot; data-text=&quot;blah blah&quot;&gt;

And then, looking at his source code, I can see a function:

componentDidMount()
{
      //other variables here 
      let data_text= $(&#39;#root&#39;).attr(&quot;data-text&quot;); //get the data attribute variable
}

Hope this helps

huangapple
  • 本文由 发表于 2020年1月3日 19:56:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/59578217.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定