从 PHP 渲染 React 组件答案

【问题标题】：Render React Components from PHP从 PHP 渲染 React 组件
【发布时间】：2014-11-20 19:52:20
【问题描述】：

我正在使用 ReactJS 来支持一个简单的可过滤项目列表，它非常适合我的需要。

问题是我出于 SEO 的原因需要在服务器上呈现标记，但是当我调用 React.renderComponent() 时，它会将现有标记替换为 React 生成的标记。

在 React 的文档中搜索我发现了这个注释：

React.renderComponent() 会替换你传入的容器节点的内容。未来，可能会在不覆盖现有子节点的情况下将组件插入到现有的 DOM 节点中。

此外，我不能使用React.renderComponentToString() 生成标记服务器端，因为我的后端在 PHP 上运行...

当前版本 (0.11.2) 是否有任何（即使是骇人听闻的）方法来实现这一点？

我想如果通过 renderComponentToString() 生成的标记可以做到这一点，那么应该有一种方法来模拟该结果？

感谢您的建议！

【问题讨论】：

标签： javascript php client-side reactjs

【解决方案1】：

简短的回答是：不是。

唯一明智的方法是让一个节点进程运行，php 可以从中请求渲染。这不是一个糟糕的解决方案，尤其是对于大量缓存的页面。

我建议以非常动态的方式进行设置：

<?php 
function render_component_to_string($component, $data) 
{
  $url = "http://localhost:9000/components/" 
    . $component 
    . "?data=" 
    . rawurlencode(json_encode($data));
  return file_get_contents($url)
}
?>

<div id="myFilteredList">
  <?= render_component_to_string("FilteredList", 
        array("items" => items, "title" => "My List")) ?>
</div>

在 node.js 中：

var app = require('express')(); // express@4.x
var React = require('react');

// create a dictionary of components 
// Object.create(null) because the key is supplied
var components = Object.create(null);
components.FilteredList = require('./components/filtered-list.js');

app.get('/component/:componentName', function(req, res){
  var component = components[req.params.componentName];

  // safety first!
  if (!component) {
    console.error("Invalid component", req.params.componentName);
    return res.send(404);
  }

  // more safety
  try {
    var data = JSON.parse(req.query.data);
  }
  catch (e) {
    console.error("Invalid JSON", req.params.componentName, req.query.data);
    return res.send(400);
  }

  // render and send the result back
  try {
    var result = React.renderComponentToString(component(data));
  }
  catch (e) {
    console.error('Could not render', req.params.componentName,
                  'with props', data);
    console.error(e.message, '\n', e.stack);
    return res.send(400);
  }
  res.send(result);
});


app.listen(9000);

这当然假设您的组件在 commonjs 模块中。如果他们不是，这是另一个这样做的理由！

几年没用过php了，如有错误请及时更新这个答案。

【讨论】：

感谢您冗长而详细的回答！这是一个很酷的解决方案，但我认为这对于我的小需求来说太过分了，无论是在复杂性还是成本方面（对于节点服务器）。如果这是我担心的事情的状态，我将不得不重写我的组件以允许我将其注入现有的 DOM 元素中，比如 Marionette。无论如何，这太糟糕了，我真的很喜欢 React :(
抛开复杂性不谈，您可以在与您的 Web 服务器/php 应用程序相同的服务器/vps 上运行它。这就是它的编写方式（在本地主机上）。
不幸的是，我们不拥有最终网站上线的网络服务器，因此我们无法让 Node 应用程序在其上运行:(

【解决方案2】：

你可以看https://github.com/reactjs/react-php-v8js

它使用 PHP 在服务器端呈现 react UI 组件。

实现非常简单，唯一的要求是您需要能够在您的服务器上设置 V8Js PHP 扩展。

【讨论】：