将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>
    );
  }
});

然而，我得到关于在我的ReactJS组件中渲染null的错误，这意味着没有正确发送子节点。所以，我的问题是:我如何将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()将为您完成。