Question

所以vanilla React允许你使用ReactDOM.render，但你必须通过JavaScript引用将它绑定到视图中。例如，在您的JavaScript中

ReactDOM.render(
    <div>
         <MyComponent>Sample Children</MyComponent>
    </div>
    , document.getElementById('content'));

并在您的HTML中

<div id="content"></div

但是使用react-rails gem中的帮助器，你只能在HTML /视图中执行此操作：

<%= react_component('MyComponent') %>

我只能看到帮助器的一个缺点，即您无法将子组件添加到组件中。

有什么想法吗？

Answer 1

react_component帮助程序创建一个目标节点，最终接收该组件。这是宝石的UJS的相关部分：

https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs_mount.js#L87

使用<%= react_component %>呈现的组件可能有子项。给定像这样的父/子组件：

var ChildComponent = React.createClass({
  render: function() { 
    return <p>{this.props.number}</p>
  }
})

var ParentComponent = React.createClass({
  render: function() {
    return (
      <div>
        <ChildComponent number="1" />
        <ChildComponent number="2" />
        <ChildComponent number="3" />
      </div>
    )
  }
})

这些将呈现1个父母+ 3个孩子：

<%= react_component("ParentComponent") %>

或，JS：

React.render(<ParentComponent />, targetNode)

视图助手的一些优点：

无需手动复制，粘贴和维护DOM ID＃34;安装组件
轻松提供从Rails到React的道具（例如react_component("ParentComponent", { numbers: [1,2,3] })）
内置安装＆amp;卸载DOM事件，Turbolinks或PJAX

希望有所帮助！

在react-rails gem中，使用视图助手react_component进行渲染与使用ReactDOM.render之间的区别是什么？

1 个答案: