Question

我正在研究现有网站的几个部分，并使用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
    );
?>

然后我将它转换为JEG，在$ el上的数据属性注入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看看我的选择是什么。

建议??

Answer 1

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

使用RefluxJS，你可以访问像＃34; store＆＃34;对于任何组件可以访问或定义事件侦听器操作的数据，通知每个组件数据都有变化＆＃34; store＆＃34;

这将间接解决有关在组件之间传递数据的问题。

要查看您的问题，请查看以下代码。

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

//access object like this
this.props.dataProps

Answer 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 )

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

2 个答案: