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，所以如果我犯了任何错误，请更新这个答案。

从PHP渲染React组件

2 个答案: