CODEWITHSUNDEEP
javascriptreactjs
Olim Saidov
Olim Saidov

Reputation: 2844

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

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.

Upvotes: 5

Views: 3097

Answers (2)

Felix Kling
Felix Kling

Reputation: 817128

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.

Upvotes: 12

Anders Ekdahl
Anders Ekdahl

Reputation: 22943

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.

Upvotes: 1

Related Questions