React.js 中的所有者和父组件有什么区别

IT技术 javascript reactjs
2021-05-12 21:40:21

React 0.13 带来了基于父级的上下文而不是基于所有者的上下文

所以,我不太明白所有者和父组件之间的区别。示例将不胜感激。

2个回答
var A = React.createClass({
    render() {
        return (
            <B>
                <C />
            </B>
        );
    }
});

在上面的示例中,A 是B 和 C所有者,因为 A 创建了这两个组件。

但是,B 是C父级,因为 C 作为子级传递给 B。

更多信息可以在文档中找到

区分所有者-所有者关系和父子关系很重要。所有者-所有者关系是 React 特有的,而父-子关系只是您从 DOM 中了解和喜爱的关系。

来自官方文档:

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

这是 A 是 B 的所有者的示例:

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

A 是 B 的所有者,因为 B 是在 A 的render函数中创建的

这是一个示例,其中 A 是 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')
);

在这个例子中,A 是 B 的父级,因为 A 的props.children包含 B。但是 A 没有直接知道它是 B 的父级,它的子级可以是任何组件。