Question

我渲染出具有液体字符串属性的组件。这些组件正在服务器上呈现，并在客户端中再次备份。基本上我是使用DOM作为数据存储。我正在讨论存储数据的方法。我需要组件向服务器呈现有效的标记以进行SEO。但我不需要像this.refs.variantId.getDOMNode()那样选择备份变量。我可以将variantId设置为一个全局客户端javascript变量，高于此代码本质上类似于var variantId = "{{ product.variants[0].id }}";。

此组件将呈现为字符串并放置在服务器上的模板文件中，服务器将处理该{{ product.variants[0].id }}变量的HTML并将其转换为1058477584之类的内容。我的组件需要自己进入现有的DOM并将价值拉出来。

var React = require("react");
var $ = require("jquery");

module.exports = React.createClass({
  handleSubmit: function(e){
    e.preventDefault();
    var variantId = this.refs.variantId.getDOMNode().value.trim();
    $.ajax({
      url: "/cart/add.js",
      method: "post",
      dataType: "json",
      data: {
        "id": variantId,
        "quantity": this.props.quantity,
      },
      success: function(data) {
        // emit cart added event
      }.bind(this),
      error: function(xhr, status, err) {
        // emit error event (cart added)
      }.bind(this)
    });
  },
  getDefaultProps: function(){
    return {
      quantity: 1,
      variantId: "{{ product.variants[0].id }}",
      buttonText: "Add to cart"
    }
  },
  render: function() {
    return (
      <div className="buyButton">
        <form action="/cart/add" method="post" encType="multipart/form-data" onSubmit={this.handleSubmit}>
          <input type="hidden" name="quantity" value={ this.props.quantity } />
          <input type="hidden" name="id" ref="variantId" value={ this.props.variantId } />
          <button type="submit" className="btn btn-holstee">{this.props.buttonText}</button>
        </form>
      </div>
    );
  }
});

我想知道人们如何将使用其他模板语言的组件渲染为字符串属性。将数据存储在其他地方是否有意义？我无法访问可以存储单个页面的服务器。它是所有模板，因此需要通过一条路径处理多个数据源。

有没有更好的方法将液体抽出组件？
有没有更好的方法来调用DOMNodes /将所有道具更新为DOMNodes？

Answer 1

我在我的应用中做了类似的事情。我使用JSON进行序列化并将其放在DOM中的脚本标记

中

<script type="application/json" id="preload-notifications">{{json_encode($preload_notifications)}}</script>

然后，

var raw = document.getElementById('preload-messaging');

if (raw === null) {
    return ;
}

var data = JSON.parse(raw.text);

我使用助焊剂架构，因此非常简单

this.dispatch('messaging', {
    messages: data
});

但你可以把它作为道具注入。

React.render(<MessagingContainer messages={data} />, messageDomNode);

无论你做什么，我建议你不要在React组件中查询DOM。尝试尽可能地传递东西作为道具。

与服务器端变量作出反应

1 个答案: