Question

我有一个应用程序（内置Rails）在后端呈现一些标记，然后我想使用ReactJS在前端“增强”其他功能。

呈现内容如下所示：

<%= react_component :TestComponent do %>
    <div class="foo">
        Here's some content.
    </div>
<% end %>

此调用创建一个包含div，其中包含一些data-属性，react_ujs然后捕获这些属性以实例化React组件。我没有做的是找到一种方法（使用jquery来做一些有点疯狂的技巧）来获取这个mount元素的内容（所以，内部div有类'foo'及其内容）在我的React组件，以便我可以将它包含在我的JSX中。

React.createClass({
    render: function() {
        return (
            <div className="my-component">
                { mount point contents here! }
            </div>
        );
    }
});

这种行为在AngularJS术语中描述为“转换”。

有关ReactJS如何实现此行为的任何想法？我收到了一些针对this.props.children的指示，但这似乎没有产生我需要的结果，即使然后mount元素也有内容，它也会undefined。

Answer 1

React中不支持此功能。 React在真正的HTML中不起作用;它适用于函数调用。尽管JSX看起来像HTML，但它在React运行之前被编译为函数调用。这意味着React不知道如何处理真正的HTML，就像你在你的例子中传递它一样。

<强> JSX ：

<div className="foo">
  Here's some content
</div>

尽管看起来与您尝试注入的内容类似，但客户端最终会看到：

<强>阵营：

React.DOM.div({className: "foo"},
  "Here's some content"
)

您的react_component助手应该接受JSX（而不是HTML）并在将其呈现到页面之前通过JSX转换器运行它。然后，您可以将结果传递给组件并将其作为this.props.children引用。

这是您的react_component应为您的示例输出的内容：

React.renderComponent(
  TestComponent(null,
    React.DOM.div({className: "foo"},
      "Here's some content"
    )
  ),
  referenceToDomNode // Not obvious where you pass this with your helper
);

您的TestComponent可能如下所示：

var TestComponent = React.createClass({
  render: function() {
    return (
      <div className="my-component">
        {this.props.children}
      </div>
    );
  }
});

在呈现的组件中包含组件装入点内容

1 个答案: