this.props.children VS this.props.someName

看來，我看到了兩個相同的方式通過道具來委託財產：this.props.children VS this.props.someName

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

來源

2016-08-19 Владимир Максименко

對我來說，這些用例滿足不同的要求，並且**不只**與轉移道具有關。 'this.props.children'是一種創建包裝兒童的*容器*組件的方法。道具沒有轉移。 –

可能是我沒有得到你的觀點，達文，但是一個孩子的組成部分。所以，this.props.children不會創建任何容器。就我而言，它只是說：「嘿，我是一個孩子！所以，我欠我的父母財產。」 –

打字錯誤，應該是「我是小孩」。 –

也許我錯了，但我認爲兒童的存在只是語法糖，以允許類似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>

來源

2016-08-19 14:36:43

不正確的示例。它實際上是this.props.someName。在你的例子中，兒童= someName –

現在，你能看到延長它可能會棘手.... –

一般來說，this.props.children被用來指所有被包裹在一個自定義組件的孩子。

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

這裏，兩個Text元素是孩子你View。在您的View組件的類定義（或同等學歷）中，您可以通過this.props.children參考所有兒童組件。但我認爲你已經明白這一點。

根據我的理解，作爲一個經驗法則，您將一些值/屬性等作爲道具傳遞給組件。

如果你想，例如，渲染在你所定義的自定義組件某些組件，您需要能夠指哪些組件從定義代碼實施代碼被宣佈，所以你用this.props.children。

我的語言有點混亂，但我希望這足夠清楚。

來源

2016-08-19 17:21:55 nabn

this.props.children VS this.props.someName

回答

相關問題