1

I have an XHP component:

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

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

that should look like this in my .php file:

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

On the ReactJS side, the component looks something like this:

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

However, I get errors about rendering null in my ReactJS component, which means that children are not sent correctly. So, my question: how can I pass the children from XHP to ReactJS?

Victor
  • 13,914
  • 19
  • 78
  • 147

1 Answers1

1

You're not including your children when rendering your XHP component.

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

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

Additionally, (assuming you built your :ui:base element with attribute forwarding as outlined here: Building a Good UI Framework with XHP) you don't need to manually set the ID of your root element, XHPJS::element() will do that for you.

Stefan Parker
  • 31
  • 3
  • show the code for that link. Don't push people there. Let them decide the merit before putting them at risk. – Drew Dec 31 '15 at 08:24