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

我只是在学习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>

//在预编译的JSX文件中
var Greeting=React.createClass({
render:function（）{
你好，{this.props.username}
}
});
//在我的PHP视图中
render（React方法是通过RESTful API加载数据

但是，您可以研究一下。不确定它有多稳定，但如果是，它将是客户端上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>';

//库
$react_source=file_get_contents（'/path/to/build/react.js'）；
//所有自定义代码都连接在一起
$app_source=file_get_contents（'/path/to/custom/components.js'）；
$rjs=new ReactJS（$react\u source，$app\u source）；
$rjs->setComponent（'MyComponent'，数组(
'任何'=>1，
“道具”=>2
)
);
/// ...
//打印呈现的标记
回显“”。$rjs->getMarkup（）；

如果确实希望在浏览器中呈现此内容，可以使用纯Javascript而不是JSX：

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


render（React.createElement（问候语，{username:}），document.body）；

另一种选择是使用
将JSX转换为纯Javascript。请记住，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>


render（您还可以查看一些关于如何从客户端调用RESTful API的示例

具体来说，它使用superagent进行AJAX调用：
方法1：定义全局变量。

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

在主PHP文件中：

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

如果您使用Redux，您可能会发现此方法特别有用。因为在构建初始状态期间，任何还原程序都可以访问此全局变量

方法2：使用
数据-*
属性。

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

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

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

此方法不如前一种方法灵活，但似乎更符合React理念。
使用ajax从后端获取数据..SPA就是这样工作的..是啊..但是我必须在页面加载后进行ajax调用…似乎有点悲哀。This.props.username可能会起作用。应该执行脚本。构建API后端可能很困难首选，但这应该仍然有效。我已经尝试了你的第一种方法。但它似乎不适用于react hook。你知道为什么吗？
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.username);
    }
}