如何将道具从模板传递到反应根节点?

2024-01-24

我已经成功地在模板上的 div 上渲染我的组件,如下所示:

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>

{% load render_bundle from webpack_loader %}<h1>Example</h1>
<div id="react-app"></div>
{% render_bundle 'main' %}

</body>
</html>

我的反应应用程序:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootElement = document.getElementById('react-app');
ReactDOM.render(<App />, rootElement);

传递数据进行反应的好方法是什么?我正在使用 Django 模板


可以通过数据属性将props传递给根元素,并在index.js中将它们传递给根元素

<div
    id="root"
    data-custom-props='{aKey: "a value"}'
></div>

index.js 文件:

ReactDOM.render(<App {...(root.dataset)}/>, root);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将道具从模板传递到反应根节点? 的相关文章