this.props.children对this.props.someName

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>
        )
    }
};

1. props.children的一般用途是什么？
2. 我可以认为它等于props.someName吗？
3. 可以提供一些props.someName不能工作但props.childred可以工作的示例吗？

Answer 1

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

​

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'));

<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>

​

Answer 2

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

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

在这里，两个Text元素是View的子元素。在View组件的类定义(或等效)中，可以通过this.props.children引用所有子组件。但我想你已经很明白了。

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

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

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