如何从模板传递props以响应根节点？

IT技术 html reactjs templates
2021-05-06 19:33:19

我已经设法在我的模板上的 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>

我的react应用程序：

索引.js

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

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

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

3个回答

可以通过数据属性将 props 传递给根元素，然后将它们传递给 index.js 中的根元素

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

index.js 文件：

ReactDOM.render(<App {...(root.dataset)}/>, root);

一种常见的模式是将 json 字符串输出到脚本标记中，然后您可以在 init 函数中引用该标记。

例如：

// Above where you include your main bundle
<script>
   window.__INITIAL_STATE.__ = { your: 'DATA', encodedIn: 'json', here: true }
</script>

然后你可以window.__INITIAL_STATE__在你的 index.js 中引用并将数据作为 props 传递到你的根组件中。

你想传递什么数据来react？Props 是允许用户在 react 中将数据从一个组件传递到另一个组件的概念。不是为了传递来自外部世界的数据来响应应用程序。

我相信这个答案可以指导您朝着正确的方向前进。 如何让 Django 和 ReactJS 一起工作？

另请阅读以下内容以了解后端和前端协同工作。 http://geezhawk.github.io/using-react-with-django-rest-framework http://www.openmindinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux

其它你可能感兴趣的问题
上一篇getServerSideProps 访问当前浏览器 url 下一篇在 ReactJS 中为渲染函数添加超时