React.js - 處理啞孩子狀態的模式？

Question

我試圖讓我的組件保持純粹（狀態生活在正在改變的組件外） - 通過從父進程傳入狀態。

我有三個鏈接，我想要更改爲活動，但不是影響所有他們，我只想影響被點擊/活動的。

有些問題沒有答案：邏輯應該在哪裏篩選出哪個元素被點擊？我們如何通過讓孩子啞巴來做到這一點？

這裏是我走到這一步：

的jsfiddle - https://jsfiddle.net/69z2wepo/33470/

var SomeElement = React.createClass({ 
    render: function() { 
    return(
     <a className={this.props.className} onClick={this.props.onClick} href="#">Click Me!</a> 
    ) 
    } 
}); 

var App = React.createClass({ 
    click: function(e) { 
    this.setState({class: "active"}) 
    }, 
    getInitialState: function() { 
    return({class: ""}) 
    }, 
    render: function() { 
    return(
     <div> 
     <SomeElement className={this.state.class} onClick={this.click} /> 
     <SomeElement className={this.state.class} onClick={this.click} /> 
     <SomeElement className={this.state.class} onClick={this.click} /> 
     </div> 
    ) 
    } 
}); 

ReactDOM.render(
    <App/>, 
    document.getElementById('container') 
); 

在此先感謝。

Answer 1

首先，元素處於活動狀態時使用的類的名稱應該在元素內部。父組件不應該知道的是：

var SomeElement = React.createClass({ 
    className: function() { 
    return this.props.active ? "active" : ""; 
    }, 
    render: function() { 
    return (  
     <a className={this.className()} onClick={this.props.onClick} href="#">Click Me!</a> 
    ) 
    } 
}); 

<SomeElement active={true,false} onClick={this.click} /> 

---

下一個點取決於你要如何表示你的應用程序的狀態。我舉兩個例子：

state: { 
    element1Active: false, 
    element2Active: false, 
    element3Active: false, 
} 

click: function(elementNumber) { 
    var stateUpdate = {}, key = 'element' + elementNumber + 'Active'; 
    stateUpdate[key] = !this.state[key]; 
    this.setState(stateUpdate); 
} 

<SomeElement active={this.state.element1Active} onClick={this.click} /> 

或（可能更好）

state: { 
    activeElementIndex: 0, 
} 

click: function(elementIndex) { 
    this.setState({activeElementIndex: elementIndex}); 
} 

<SomeElement active={this.state.activeElementIndex === 0} onClick={this.click} /> 

---

最後，過濾被點擊的按鈕，你可以綁定參數回調：

return(
    <SomeElement active={this.state.activeElementIndex === 0} onClick={this.click.bind(this, 0)} /> 
    <SomeElement active={this.state.activeElementIndex === 1} onClick={this.click.bind(this, 1)} /> 
    <SomeElement active={this.state.activeElementIndex === 2} onClick={this.click.bind(this, 2)} /> 
)