英文:
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 **
<div id="MyComponent"></div>
<div id="MyComponent"> string I want to pass</div> I can't get this innerHTML as well as ID is already tagged.
<div id="MyComponent" customProp="string to I want to pass"></div> 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 <MyComponent /> 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('MyComponent');
ReactDOM.render(
<MyComponent {...element.attributes} />,
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 <MyComponent />
<div id="app">
<MyComponent customProp="string to I want to pass" />
</div>
in app.js
ReactDOM.render(<App />, document.getElementById('app'));
答案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:
<div id="root" data-text="blah blah">
And then, looking at his source code, I can see a function:
componentDidMount()
{
//other variables here
let data_text= $('#root').attr("data-text"); //get the data attribute variable
}
Hope this helps
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论