Include component mount point contents in rendered component

Question

I have an application (built in Rails) that renders some markup in the back-end, which I would then like to "enhance" with additional functionality in the front-end, using ReactJS.

Rendering the content looks something like this:

<%= react_component :TestComponent do %>
    <div class="foo">
        Here's some content.
    </div>
<% end %>

This call creates a wrapper div with some data- attributes that react_ujs then captures to instantiate React components. What I'm failing to do is find a way (short of using jquery to do some mildly crazy tricks) to get the contents of this mount element (so, the inner div with the class 'foo', and its contents) in my React component, so that I can then include it in my JSX.

React.createClass({
    render: function() {
        return (
            <div className="my-component">
                { mount point contents here! }
            </div>
        );
    }
});

The behavior is what's described in AngularJS terms as a "transclude".

Any ideas how this behavior can be achieved with ReactJS? I've received some pointers towards this.props.children, but this doesn't seem to yield the results I need, and will be undefined even then the mount element has content.

score 1 · Answer 1 · answered Apr 18 '14 at 16:03

This is not supported functionality in React. React doesn't work in real HTML; it works in function calls. Even though JSX looks like HTML, it is compiled to function calls before it is run by React. That means React doesn't know what to do with real HTML like you are passing it in your example.

JSX:

<div className="foo">
  Here's some content
</div>

Even though that looks similar to the content you are trying to inject, the client ends up seeing this:

React:

React.DOM.div({className: "foo"},
  "Here's some content"
)

Your react_component helper should accept JSX (not HTML) and run it through the JSX converter before rendering it to the page. Then you can pass the result to a component and reference it as this.props.children.

This is what your react_component should output for your example:

React.renderComponent(
  TestComponent(null,
    React.DOM.div({className: "foo"},
      "Here's some content"
    )
  ),
  referenceToDomNode // Not obvious where you pass this with your helper
);

And your TestComponent could look like this:

var TestComponent = React.createClass({
  render: function() {
    return (
      <div className="my-component">
        {this.props.children}
      </div>
    );
  }
});

Include component mount point contents in rendered component

1 Answers1

Linked