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元素，如此处所述：Building a Good UI Framework with XHP），您不需要手动设置根元素的ID，XHPJS :: element（）将为你做那件事。

将孩子从XHP传递到ReactJS

1 个答案: