草庐IT

php - 带有服务器端 PHP 模板的 ReactJS？

coder 2024-04-17 原文

我刚刚开始学习 ReactJS 并试图弄清楚如何 - 如果 - 我可以将它与 Symfony2 应用程序在服务器端生成的现有模板一起使用。

想法是使用 ReactJS 更新部分 View (小部件 - 或者从技术角度来看，Symfony2“部分模板”)，例如更新评论计数器，或将新新闻添加到列表顶部新闻并删除最底部的新闻。

我当然可以只使用对服务器的 Ajax 调用，从 Symfony2/Twig 获取列表的整个模板，然后通过 jQuery 或其他方式在 DOM 中刷新/替换它:

    <ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li><strong>4</strong> OLD news - to be removed</li>
    </ul>

当出现新的新闻条目时，它看起来像这样:

    <ul id="list">
        <li><strong>0</strong> NEW news</li>
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
    </ul>

(即删除底部的“4”并在列表顶部添加“0”)。

这是我想要实现的“小部件”示例之一，或者更确切地说 - 因为它们已经作为 Twig(PHP 模板引擎)模板存在 - 添加一些客户端 JS 动态到这些模板，可以考虑在某种程度上作为小部件。

但是如何使用 ReactJS 实现呢？

到目前为止，我得出的结论是，我似乎需要在我的 PHP Twig 模板中做这样的事情:

<div id="content">
    <ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li>4 news</li>
    </ul>
</div>

React.render(
    <ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li>4 news</li>
    </ul>,
    document.getElementById('list')
  );

同一个列表生成了两次。这是因为第一个列表是针对非 JS 用户 + 类似 google 的机器人，第二个列表只是为了通知 ReactJS 我的列表组件的结构是什么。当然，实际上我会动态创建这个列表，比如:

<li>{ newsContent }</li>

无论如何，创建同一个列表两次对我来说似乎是一个非常糟糕的主意。所以我在想 ReactJS 是否能够读取我的 DOM，并以某种方式自动找出 HTML UL 元素由 LI 元素组成，并构建其虚拟 DOM？然后我可以为它调用一个 JS React 方法吗？

或者也许我可以做类似的事情:

  1. 从服务器获取新的新闻元素(单个 LI)
  2. 从页面的 DOM 中获取当前新闻列表(UL 和 LI 子级)
  3. 手动删除最底部的
  4. 合并两者，并将其作为包含 HTML 的新字符串传递给 ReactJS？

总而言之，ReactJS 是否能够构建读取我当前 DOM 的虚拟 DOM？

或者，ReactJS 是否能够直接从字符串(而不是 JSX)呈现，就像整个 UL + 所有 LI 元素一样？

或者更简单，是否可以将带有 HTML 标记的字符串转换为 ReactJS 元素(然后我可以从服务器获取整个新模板并将其传递给 React 的渲染方法)？

更新:

到目前为止，我了解到有一个像 Babel 这样的工具可以将 JSX 编译成 Javascript，这对我来说非常有帮助。但是，我到底要如何获得 Babel 的简单 .js 副本？我看到只有一种 npm(Node.JS？)包。是否可以像普通 JS 文件库一样包含它？

最佳答案

您想要的是 PHP 呈现有效的“React”标记(包括校验和和特殊 ID)，这样当 React 看到它时，它可以挂载在它上面并恢复执行。

这似乎有帮助:https://packagist.org/packages/camspiers/reactjs-php-render

关于php - 带有服务器端 PHP 模板的 ReactJS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31751647/

ReactJSphpgtltlisymfony

有关php - 带有服务器端 PHP 模板的 ReactJS？的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  4. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  6. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  7. ruby-on-rails - 在 Rails 中调试生产服务器 - 2

    您如何在Rails中的实时服务器上进行有效调试，无论是在测试版/生产服务器上？我试过直接在服务器上修改文件，然后重启应用，但是修改好像没有生效，或者需要很长时间(缓存？)我也试过在本地做“脚本/服务器生产”，但是那很慢另一种选择是编码和部署，但效率很低。有人对他们如何有效地做到这一点有任何见解吗？ 最佳答案 我会回答你的问题，即使我不同意这种热修补服务器代码的方式:)首先，你真的确定你已经重启了服务器吗？您可以通过跟踪日志文件来检查它。您更改的代码显示的View可能会被缓存。缓存页面位于tmp/cache文件夹下。您可以尝试手动删除

  8. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  9. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  10. ruby-on-rails - 带有 Zeus 的 RSpec 3.1，我应该在 spec_helper 中要求 'rspec/rails' 吗？ - 2

    使用rspec-rails3.0+，测试设置分为spec_helper和rails_helper我注意到生成的spec_helper不需要'rspec/rails'。这会导致zeus崩溃:spec_helper.rb:5:in`':undefinedmethod`configure'forRSpec:Module(NoMethodError)对thisissue最常见的回应是需要'rspec/rails'。但这是否会破坏仅使用spec_helper拆分rails规范和PORO规范的全部目的？或者这无关紧要，因为Zeus无论如何都会预加载Rails？我应该在我的spec_helper中做

随机推荐