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

Question

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

我本以为我只会在我的 php 视图中调用

RenderDom

，例如：

// 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

脚本区域没有被执行......但是当然，如果我删除它，就会出现语法错误。

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

Answer 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');
const root = createRoot(app);
root.render(<Greeting {...app.dataset} />);

现在您可以像普通道具一样访问服务器数据。

function Greeting(props) {
    console.log(props.username);
}

这种方法没有上一种那么灵活，但似乎更符合React哲学。

Answer 2

React 方式是通过 RESTful API 加载数据。

但是，您可以研究使用 PHP V8JS 的 React 组件的服务器端渲染。不确定它有多稳定，但如果的话，它将是客户端上 AJAX 调用的一个非常好的/更好的替代方案。它看起来有点像这样：

// the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');

$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('MyComponent', array(
  'any'   =>  1,
  'props' =>  2
  )
);

/// ...

// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';

如果你确实想在浏览器中渲染它，你可以使用纯 Javascript 而不是 JSX：

<?php $username = 'Eric Andre'; ?>
<script type="text/javascript">
  ReactDOM.render(React.createElement(Greeting, { username: "<?php echo $username; ?>" }), document.body);
</script>

另一种选择是使用 babel-browser 将 JSX 转换为纯 Javascript，并使用

<script type="text/babel">

。请记住，babel-browser 不再处于积极开发状态，也不适合生产使用。

<?php $username = 'Eric Andre'; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script type="text/babel">
  ReactDOM.render( <Greeting username="<?php echo $username; ?>"/>, document.body );
</script>

Answer 3

您还可以查看 https://github.com/erikras/react-redux-universal-hot-example，了解一些有关如何从客户端调用 RESTful API 的示例。

具体来说，它使用 superagent 进行 AJAX 调用： https://github.com/visionmedia/superagent