反應：將道具傳遞給後代

是否有將道具傳遞給React中的後代組件的推薦模式？反應：將道具傳遞給後代

下面，我通過道具callback的子組件：

Master = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ListComp items={this.props.items} callback={this.handleClick} /> 
     </div> 
    ); 
    } 
}); 

ListComp = React.createClass({ 
    render: function() { 

    this.props.items.forEach(function(item) { 
     items.push(<ItemView item={item} callback={this.props.callback} />); 
    }, this); 

    return (
     <ul>{items}</ul> 
    ); 
    } 
});

然後是callback道具被流傳下來的後代組成：

ItemComp = React.createClass({ 
    render: function() { 
    return (
     <li><a onClick={this.handleClick} href="#">Link</a></li> 
    ); 
    }, 

    handleClick: function(e) { 
    e.preventDefault(); 
    this.props.callback(); 
    } 
});

是否正確傳遞道具兩次這樣下去，還是應該以某種方式引用它的繼承？

我看到了一個文檔的方法transferPropsTo，並從記錄它看起來像我可以從後代通過this.props.__owner__.props得到callback但是那些兩雙下劃線讓我覺得我不應該。

來源

2014-02-13 cantera

我看到通過回調兩次沒有問題。它需要多一點打字，但它明確而易於理解。 – NVI

是的，這是慣用的。將每個組件看作一個功能，其參數就是道具 - 從這個角度來看，傳遞道具顯然看起來更加正常。我們發現它讓事情變得更加可維護，讓所有事情都變得明確，這樣您就可以看到組件的所有輸入是什麼，以及您傳遞的是什麼。（未來版本的React可能會包含一個名爲「contexts」的特性，這個特性可以隱式傳遞，但它可能會使代碼更難以推理，所以我仍然偏愛幾乎所有的。時間）

UPDATE（而不是由原作者）

文檔終於被添加（它增加了夏季2015年夏季至2016年間的某個時候，可能與發行0.14）：

Official React Context Documentation。

請注意，這也是react-redux如何簡化商店通過層次結構的傳遞。

來源

2014-02-13 15:57:48

與適中大小的Angular JS應用程序一起工作時，「上下文」功能聽起來像Angular的示波器機制，聽起來令人困惑。 $範圍與$ rootScope，範圍注入......當前版本的React（0.8.0）的明確性贏得了我的讚賞，並讓普通的老JS範圍規則。 –

@ssorallen我們非常清楚這一點。上下文目前在master中可用，但它們沒有記錄，並且可能會發生變化，因爲我們希望確保清楚。上下文可能永遠是最多可選的高級功能。 –

太棒了。我確信在框架內它是有用的，並在一些古怪的用例。 –

反應：將道具傳遞給後代

回答

相關問題