Home » Reactjs » What is the difference between owner and parent component in React.js

What is the difference between owner and parent component in React.js

Posted by: admin January 30, 2018 Leave a comment

Questions:

React 0.13 brings parent-based context instead of owner-based context.

So, i can’t quite understand the difference between owner and parent components. Examples will be appreciated.

Answers:
var A = React.createClass({
    render() {
        return (
            <B>
                <C />
            </B>
        );
    }
});

In the above example, A is the owner of B and C, because A creates both of the components.

However, B is the parent of C because C is passed as child to B.

More information can be found in the documentation.

It’s important to draw a distinction between the owner-ownee
relationship and the parent-child relationship. The owner-ownee
relationship is specific to React, while the parent-child relationship
is simply the one you know and love from the DOM.

Questions:
Answers:

From the official documentation:

An owner is the component that sets the props of other components

Here an example where A is the owner of B:

var A = React.createClass({
  render: function() {
    return <B />;
  }
});

A is the owner of B because B is created in A’s render function.

This is an example where A is the parent of B:

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

var B = React.createClass({
  render: function() {
    return <span>B</span>;
  }
});

React.render(
  <A><B /></A>,
  document.getElementById('example')
);

In this example, A is the parent of B because A’s props.children contains B. But A has no direct knowledge of that its the parent of B, its children could be any component.