从PHP渲染React组件

Question

我正在使用ReactJS为一个简单的可过滤项目列表提供支持,它可以很好地满足我的需求.

问题是我需要在服务器上呈现标记以获取SEO原因,但是当我调用React.renderComponent()它时,用React生成的标记替换现有标记.

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

React.renderComponent()替换您传入的容器节点的内容.将来,可以将组件插入现有DOM节点而不覆盖现有子节点.

而且我不能React.renderComponentToString()用来生成标记服务器端,因为我的后端在PHP上运行...

是否有任何(即使是hackish)方式来实现当前版本(0.11.2)？

我想如果使用renderComponentToString()生成的标记可以实现,那么应该有一种模拟结果的方法吗？

谢谢你的建议!

Answer 1

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

它使用PHP呈现服务器端的UI组件.

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

Answer 2

简短的回答是：并非如此。

唯一明智的方法是让一个节点进程运行，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 了，所以如果我犯了任何错误，请更新这个答案。