Reactjs this.props.children vs.props.someName

Reactjs this.props.children vs.props.someName,reactjs,children,Reactjs,Children,似乎,我看到了两种通过道具委托财产的同等方式: let App = React.createClass({ render(){ return ( <Unit someName="Push me!" /> ) } }); class Unit extends React.Component{ render(){ return ( <button>

似乎,我看到了两种通过道具委托财产的同等方式:

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(){
返回(
)
}
});
类单元扩展了React.Component{
render(){
返回(
{this.props.someName}
)
}
};

let App=React.createClass({
render(){
返回(
现在推我!
)
}
});
类单元扩展了React.Component{
render(){
返回(
{this.props.children}
)
}
};
  • 儿童道具的一般用途是什么
  • 我能认为它等于道具吗?
  • 可以提供一些props.someName不起作用但props.childred起作用的示例吗

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

    let App=React.createClass({
    render(){
    返回(
    )
    }
    });
    类单元扩展了React.Component{
    render(){
    返回(
    {this.props.children}
    )
    }
    };
    ReactDOM.render(,document.getElementById('app'))
    
    
    
    也许我错了,但我认为子元素的存在只是一种语法上的糖分,允许类似HTML的元素嵌套。据我所知,它与任何其他财产完全相同。事实上,在使用JSX时,您可以将子级添加为普通属性,这没有任何区别

    let App=React.createClass({
    render(){
    返回(
    )
    }
    });
    类单元扩展了React.Component{
    render(){
    返回(
    {this.props.children}
    )
    }
    };
    ReactDOM.render(,document.getElementById('app'))
    
    一般来说,
    this.props.children
    用于指包装在自定义组件中的所有子组件

    <View>
       <Text>One</Text>
       <Text>Two<Text>
    </View>
    
    
    一个
    两个
    
    在这里,两个
    文本
    元素是
    视图
    的子元素。在
    视图
    组件的类定义(或等效项)中,您可以通过
    this.props.children
    引用所有子组件。但我想你已经明白了很多

    据我所知,根据经验,您可以将一些值/属性等作为道具传递给组件

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


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

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

    <View>
       <Text>One</Text>
       <Text>Two<Text>
    </View>
    
    
    一个
    两个
    
    在这里,两个
    文本
    元素是
    视图
    的子元素。在
    视图
    组件的类定义(或等效项)中,您可以通过
    this.props.children
    引用所有子组件。但我想你已经明白了很多

    据我所知,根据经验,您可以将一些值/属性等作为道具传递给组件

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


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

    对我来说,这些用例满足不同的需求,并且不仅仅与转移道具有关
    this.props.children
    是一种创建包装子容器组件的方法。道具没有转移。可能我不明白你的意思,戴文,但这是一个儿童组件。因此,this.props.children不会创建任何容器。在我的例子中,它只是说:“嘿,我是一个孩子!所以,我欠我父母的财产。”请原谅输入错误,它应该是“我是一个孩子”。对我来说,这些用例满足不同的要求,并且不仅仅与转移道具有关
    this.props.children
    是一种创建包装子容器组件的方法。道具没有转移。可能我不明白你的意思,戴文,但这是一个儿童组件。因此,this.props.children不会创建任何容器。在我的例子中,它只是说:“嘿,我是个孩子!所以,我欠我父母的财产。”请原谅打字错误,它应该是“我是个孩子”。这不是正确的例子。实际上是这个。道具。名字。在您的示例中,children=somename不是正确的示例。实际上是这个。道具。名字。在您的示例中,children=someName