Question

看来，我看到两种通过道具委托财产的平等方式：

let App = React.createClass({
    render(){
        return (
          <Unit someName="Push me!" />
        )
    }
});

class Unit extends React.Component{
    render(){
        return (
          <button>
            <span className="glyphicon glyphicon-heart"/>
            {this.props.someName}
          </button>
        )
    }
};

和

let App = React.createClass({
    render(){
        return(
          <Unit>
            <span className="glyphicon glyphicon-heart"></span>
            Push me now!
          </Unit>
        )
    }
});

class Unit extends React.Component{
    render(){
        return (
          <button>{this.props.children}</button>
        )
    }
};

props.children的一般目的是什么？
我可以认为它与props.someName相同吗？
可以提供一些例子，其中props.someName不起作用，但props.childred呢？

Answer 1

也许我错了，但我认为孩子的存在只是语法糖，允许类似HTML的嵌套元素。据我所知，它与任何其他财产完全相同。事实上，在使用JSX时，您可以将子项添加为普通属性，但它并没有任何区别。

＆＃13;

let App = React.createClass({
    render(){
        return(
            <Unit children={<span className="glyphicon glyphicon-heart">Push me now!</span>}/>
            )
    }
});

class Unit extends React.Component{
    render(){
        return (
        <button >{this.props.children}</button>
        )
    }
};
ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

Answer 2

一般来说，this.props.children用于指代所有自定义组件中包含的子项。

<View>
   <Text>One</Text>
   <Text>Two<Text>
</View>

此处，两个Text元素是您View的子元素。在View组件的类定义（或等效）中，您可以按this.props.children引用所有子组件。但我想你已经明白了这一点。

根据我的理解，作为经验法则，您将一些值/属性等作为道具传递给组件。

例如，如果您想要在您定义的自定义组件中呈现某些组件，则需要能够引用实现中声明的组件代码来自定义代码，因此您使用this.props.children。

我的语言有点混乱，但我希望这很清楚。

this.props.children vs this.props.someName

2 个答案: