我应该如何将静态数据传递给 React 组件？答案

【问题标题】：How should I pass static data into a React component?我应该如何将静态数据传递给 React 组件？
【发布时间】：2015-06-03 22:01:52
【问题描述】：

我正在对现有网站的多个部分进行处理，并将它们与 Webpack 和 React 捆绑在一起。现有网站不使用任何类型的 API，并使用 PHP 输出其大部分标记。

我的第一个项目是采用一种在网站上多个地方使用的表单并将其移动到 React 组件中。此表单有时会预先填充数据库中的数据，我不确定将这些数据放入 React 组件的最简洁方法。

以前表单只是用 PHP 和几个 <?php echo $FormFieldValue ?> 块输出。我需要将 PHP 数据放入 React 组件中。

目前我正在这样做：

在 PHP 中，我创建了一个数组来表示我可以从 API 中获得什么：

<?php
    $formData = array(
        'FirstName' => $theUser->FirstName,
        'LastName' => $theUser->LastName,
        'EmailAddress' => $theUser->EmailAddress,
        'Company' => $theUser->Company
    );
?>

然后我在 $el 上的 data- 属性中将其转换为 JSON，React 组件被注入：

<div data-props='<?php echo json_encode($billingInfoFormData) ?>'></div>

我的组件：

var BillingInfo = React.createClass({

    getInitialState() {
        return this.props.dataProps
    },
    render() { … }
})

最后，渲染它：

var $domEl = $('[data-billing-info-form]')
var BillingInfoForm = require('./components/Forms/BillingInfo.jsx')
var BillingInfoFormDom = React.render(
    <BillingInfoForm
        dataProps = {$domEl.data('props')}
        formTitle = 'Billing Info' />,
    $domEl.get(0)
)

现在是这样。我知道用道具填充状态被认为是禁忌。所以我在这里，转向 Stack Overflow 看看我的选择是什么。

建议？？

【问题讨论】：

为什么不将<script>标签中所需的数据作为“全局”变量存储为$billingInfoFormData中的JSON值并将其读入BillingInfoForm？我不明白您为什么要将数据放入div？
主要是因为我不想在不立即将数据显式附加到某个东西的情况下将数据存储在全局命名空间中。
嗯，这就是大多数同构 React 应用程序的实现方式。因此，这是一种非常常见的模式（在其他框架和库中也很常见）。
Props in getInitialState Is an Anti-Pattern
有没有想过这个？

标签： javascript json reactjs webpack

【解决方案1】：

您似乎在反应渲染中使用调用，这不是一个好主意。仅将 php 用于 api 调用，并让像 SuperAgent 这样的 javascript 框架对 RESTfull 服务执行 ajax 请求，并将其传递回名为 [RefluxJS2 的 javascript 框架。

使用RefluxJS，您可以访问很酷的东西，例如任何组件都可以访问的数据“存储”或为事件侦听器定义操作，以通知每个组件数据“存储”发生变化

这将间接解决您关于在组件之间和向组件中传递数据的问题。

要解决您的问题，请查看下面的代码。

//set default props
getDefaultProps() {
    return {
        dataProps: {}
    }
},

//access object like this
this.props.dataProps

【讨论】：

这是一个没有 API 的现有站点，但也没有构建 API 的方法。因此数据必须来自组件所在的页面，格式为 JSON。
我建议你不要在 react 渲染中使用 PHP，就像在 PHP 类中使用 javascript 一样。

【解决方案2】：

这个怎么样？

<div id="root">
    <script type="text/json">
        { "data": [] }
    </script>
</div>

var root = document.getElementByID( 'root' )
var data = JSON.parse( root.firstElementChild.innerHTML )
React.render( <Component data={data} />, root )

【讨论】：