依賴注入 - 將子組件作爲道具傳遞給父組件

我試圖確定什麼是慣用的/規範的方式是將子組件作爲父組件的道具傳遞。我找不到很好的例證，並很努力，以確定是否這有什麼關係this.props.children ....說我有一個簡單的組件做出反應，像這樣：依賴注入 - 將子組件作爲道具傳遞給父組件

const Clazz = React.createClass({ 

    render: function(){ 

     return (
      <this.props.A/> 
      <this.props.B/> 
      {this.props.children} 
     ) 
    } 
});

說我想要呈現此組件，並通過兩個子組件像這樣：

const A = React.createClass({ 
    render:() => 'a'; 
}) 

const B = React.createClass({ 
    render:() => 'b'; 
}) 


ReactDOM.render(<Clazz A={A} B={B} />, document.getElementById('root'));

正如你所看到的，我想通過道具傳遞組件C的孩子。我從來沒有理解 - 這是不同於使用this.props.children？我在這裏做的足夠好嗎？ 作爲道具傳遞孩子的慣用方式是什麼？這與這有什麼關係：this.props.children？幾個月後，我仍然沒有得到什麼this.props.children。我假設this.props.children由React設置，並且我是而不是應該設置該值，但我不確定。

來源

2017-01-22 Alexander Mills

當您使用JSX時，您只是簡單地使用了一些超過React.createElement的語法糖。

孩子是你在JSX中嵌入組件標籤內的東西，它轉換爲React.createElement的第三個參數。

React.createElement(
    type, 
    [props], 
    [...children] 
)

所以這JSX：

<Clazz A={A} B={B}> 
    'Hello' 
</Clazz>

將轉化成這樣的：

const element = React.createElement(
    'Clazz', 
    {A: A, B: B}, 
    'Hello' 
);

props.children有時是一個數組，有時沒有。因此，React有一些實用程序可以與他們合作。更多細節在這裏：https://facebook.github.io/react/docs/react-api.html#react.children

最後：一切都是「編譯」功能。如果你的組件像一個工廠，你不能知道什麼會在手前呈現，那麼傳遞組件作爲道具是有道理的。

但是，如果您只是想「饋送」一些將通過其父呈現方法顯示的內容，則使用子項更合適。

它與Angular的「transclude」類似，如果您使用過它。

孩子將永遠是React元素，而道具可以是任何東西。總的來說，我認爲人們會期望孩子能夠按照提供的方式呈現，而道具則會有明確的行爲來影響內容輸出。

新增注意
更確切地說，React.createElement可以通過以上三個參數。但是，從第三個開始，他們就是孩子。

你可以檢查 this example where there is more than one child in JSX/React.createElement與巴貝爾repl。

來源

2017-01-22 01:36:04 Amida

這是一個很好的更深入的解釋，但它似乎並不贊同其他答案 - 另一個答案是暗示this.props.children來自React.createElement的第二個參數，而不是第三個，這是什麼？！ –

它更有意義，this.props.children來自第三個參數，因爲第二個參數字面上只是由this.props表示。 –

我不明白 - 我希望React將它命名爲this.X.children，而不是this.props.children。 X只是道具而已。因爲它顯然不是用戶所確定的道具屬性。 –

你可以直接通過孩子喜歡這樣：

ReactDOM.render(<Clazz> 
     {A} 
     {B} 
    </Clazz>, document.getElementById('root'))

和接入/使其在clazz中渲染方法，像這樣：

render: function(){ 
    return (
     {this.props.children} 
) 
}

所以全樣本應該是這樣的：

const Clazz = React.createClass({ 
    render: function(){ 
    return (
     {this.props.children} 
    ) 
    } 
}); 

const A = React.createClass({ 
    render:() => 'a'; 
}) 

const B = React.createClass({ 
    render:() => 'b'; 
}) 


ReactDOM.render(<Clazz>{A}{B}</Clazz>, document.getElementById('root'));

來源

2017-01-22 00:20:51 SnowMax

你確定這是正確的，給出其他答案？ –

依賴注入 - 將子組件作爲道具傳遞給父組件

回答

相關問題