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}
)
}
};
也许我错了,但我认为子元素的存在只是允许类似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