reactjs - 将子级从 XHP 传递到 ReactJS

Question

我有一个 XHP 组件：

final class :common:message-stripe extends :ui:base {
  use XHPReact;

  protected function compose() {
    $this->constructReactInstance( "MessageStripe", Map {} );
    return <div id={$this->getID()} />;
  }
}

.php在我的文件中应该是这样的：

<common:messagestripe>
  This is my message :)
</common:messagestripe>

在 ReactJS 端，组件看起来像这样：

var MessageStripe = React.createClass({
  render: function() {
    return (
      <div className="message"> {this.props.children} </div>
    );
  }
});

但是，我null在我的 ReactJS 组件中收到有关渲染的错误，这意味着未正确发送子级。所以，我的问题是：我怎样才能将孩子从 XHP 传递给 ReactJS？

Answer 1

在渲染 XHP 组件时，您没有包括您的孩子。

final class :common:message-stripe extends :ui:base {
  use XHPReact;

  protected function compose() {
    $this->constructReactInstance( "MessageStripe", Map {} );
    return <div>{$this->getChildren()}</div>;
  }
}

此外，（假设您使用此处概述的属性转发构建 :ui:base 元素：使用 XHP 构建良好的 UI 框架）您不需要手动设置根元素的 ID，XHPJS::element() 会做给你的。