如何使用 HTML 元素屬性將數據從 Blade.php 文件傳遞​​到 React 組件？

Question

幫助！ 我正在做 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 文件不能像在 JS 中那樣在blade.php 文件中輸入<MyComponent /> ，而 php 文件只能通過 ID 標簽使用組件。 請不要建議fetch ，我知道它會解決這個問題，但是為了達到預期的效果，這個過程不必要地更長，只是為了顯示。我寧願在 HTML 中硬編碼這個組件。

預期效果：我希望這個 React 組件根據傳遞的字符串調整它的文本。 我可以簡單地在 JS 中對文本進行硬編碼，但組件將無法重用並破壞組件化。

Answer 1

您可以首先將element定義為 const/var 或其他任何內容。 然后你使用element.attributes訪問元素的屬性並像這樣迭代你的屬性：

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

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

您可以使用this.props訪問屬性。

如果您要傳遞 data-* 屬性，則可以使用{...element.dataset}傳遞這些屬性

Answer 2

你可以使用<MyComponent />

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

在 app.js 中

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

Answer 3

我不是鐵桿 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
}

希望這可以幫助