如何将 JavaScript 变量传递给 React 组件答案

【问题标题】：How to pass JavaScript variables to React component如何将 JavaScript 变量传递给 React 组件
【发布时间】：2017-11-07 04:12:51
【问题描述】：

我对 React 有点陌生，我在将一些变量从我的 Django 服务器传递到我的 React 组件时遇到了一些麻烦。这是我所拥有的：

服务器是 Django，我有一个 url mydomain.com/testview/ 映射到 views.py 函数 testview：

def testview(request):
    now = datetime.datetime.now()
    return render(request, 'testview.html', {
        'foo': '%s' % str(now),
        'myVar': 'someString'
    })

换句话说，运行 testview 将呈现模板文件 testview.html 并将使用变量 foo 和 myVar。

文件 testview.html 继承自 base.html，如下所示：

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    {% block main %}{% endblock %}
  </body>
</html>

文件 test.html 基本上将需要的代码插入到块 main 中：

testview.html:

{% extends "base.html" %}
{% load render_bundle from webpack_loader %}

{% block main %}
<script type="text/javascript">
var foo = {{ foo }};  
var myVar = {{ myVar }};  
</script>
<div id="App"></div>
{% render_bundle 'vendors' %}
{% render_bundle 'App' %}
{% endblock %}

请注意，就在 div id="App" 之前，我创建了几个 javascript 变量 foo 和 myVar 并将它们设置为来自 Django 的值。

现在反应：我的文件 App.jsx 看起来像这样：

import React from "react"
import { render } from "react-dom"

import AppContainer from "./containers/AppContainer"

class App extends React.Component {
  render() {
    return (
      <AppContainer foo={props.foo} myVar={props.myVar}/>
    )
  }
}

render(<App foo={window.foo} myVar={window.myVar}/>, document.getElementById('App'))

换句话说，我的 App.jsx 文件渲染 App 组件，传入 foo 和 myVar。在 App 类中，我假设这些是道具，所以我使用 props.foo 和 props.myVar 将它们传递给 AppContainer。我的 AppContainer 类位于 components 文件夹中，如下所示：

import React from "react"

import Headline from "../components/Headline"

export default class AppContainer extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <Headline>Running App! foo is {props.foo}, Here is a string: {props.myVar}</Headline>
          </div>
        </div>
      </div>
    )
  }
}

但是，这些似乎都不起作用。我只是得到一个空白页。我做错了什么？

【问题讨论】：

嗨，Marc，尝试从 App.jsx 文件最后一行的变量中删除 window：render(<App foo={foo} myVar={myVar}/>, document.getElementById('App'))。您将它们创建为全局变量，因此可以仅通过名称访问它们。不需要window.。
尝试在此行之后提醒 foo 值，var foo = {{ foo }};

标签： javascript django reactjs

【解决方案1】：

如果 foo 和 myVar 是字符串，你应该声明

var foo = "{{ foo }}";  
var myVar = "{{ myVar }}";

【讨论】：

【解决方案2】：

所以这是我需要做的才能让它工作。首先，我在上面使用了 Giang Le 的答案，在我的 testview.html 文件（一个 Django 模板文件）中，我在变量周围加上了引号，因为它们确实是字符串。接下来，我将 App.jsx 文件中的渲染语句更改为：

render(<App foo={foo} myVar={myVar}/>, document.getElementById('App'))

这使用了 Bruno Vodola Martins 的回答来访问 foo 和 myVar 作为 javascript 全局变量。我还必须在我的 App 类中使用 this.props.foo 而不是 props.foo：

class App extends React.Component {
  render() {
    return (
      <AppContainer foo={this.props.foo} myVar={this.props.myVar}/>
    )
  }
}

我在容器/AppContainer.jsx 中做了同样的事情：

export default class AppContainer extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <Headline>App! foo is {this.props.foo}, Here is a string: {this.props.myVar}</Headline>
          </div>
        </div>
      </div>
    )
  }
}

底线：在 Django 的字符串变量周围加上引号，并使用 this.props.foo 而不是 props.foo。

【讨论】：