如何将服务器数据传递到React组件

Question

我只是在学习React，虽然我了解许多基础知识，但是有一个概念我还没有见过任何人涵盖：如何获取通过服务器端语言（例如PHP）加载的信息，并在加载时使用它反应视图？

我本来希望我RenderDom在php视图中有电话，例如：

// In the pre-compiled JSX file
var Greeting = React.createClass({
    render: function() {
        <div>
            <h1>Hello, { this.props.username }</h1>
        </div>
    }
});

// In my PHP view
<script type="text/jsx">
    ReactDOM.render( <Greeting username="<?php echo $username; ?>"/>, document.body );
</script>

但这是行不通的。什么都不显示。我认为这是因为text/jsx脚本区域未执行...但是，如果我删除该语法区域，则当然可以。

太...我只是想知道，从数据库中加载数据并将其传递到React组件的典型方法是什么？

Answer 1

方法1：定义一个全局变量。

在您的主要PHP文件中：

<script>
    window.reactInit = {
        username: <?php echo $username; ?>
    };
</script>

在您的组件中：

class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.username = reactInit.username;
    }
}

如果您使用Redux，则可能会发现此方法特别有用。因为您的任何化简器都可以在初始状态建立期间访问此全局变量。

方法2：使用data-*属性。

<div id="app" data-username="<?php echo $username; ?>"></div>

所有data-*属性都使用传递{...app.dataset}。

const app = document.getElementById('app');
ReactDOM.render(<Greeting {...app.dataset} />, app);

现在，您可以作为普通道具访问服务器数据。

class Greeting extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.username);
    }
}

这种方法没有以前的方法灵活，但是似乎与React哲学更加一致。