ReactJS在多個組件之間保持單個「活動」狀態

我正在嘗試遵循最佳實踐，同時遵守文檔。沒有創建許多一次性方法來處理維護性方面的事情。ReactJS在多個組件之間保持單個「活動」狀態

無論如何總的來說，我試圖實現一個兄弟姐妹元素之間的狀態，至少在視覺上處於「活躍」狀態。隨着像jQuery的，我只想做..

$(document).on('.nav-component', 'click', function(e) { 
    $('.nav-component').removeClass('active'); 
    $(this).addClass('active'); 
});

然而，在反應，每個部件在它的本身是獨立於下一個和以前的，並應繼續按照文件等。

也就是說，當我處理一個組件的點擊事件時，我可以成功地給它一個活動狀態和非活動狀態，分別打開和關閉它。但是當我不需要它們時，我最終會在一個有多個「主動」元素的地方。

這是爲了設置各種導航。所以我希望當前正在使用的那個具有該活動類，而其餘的不會。

來源

2015-10-23 chris

我使用帶回流的app.store爲多個頁面/組件設置狀態。你可以做同樣的通過狀態直到一個共同的組件，但使用通量模式更清潔。

class AppCtrlRender extends Component { 
 
    \t render() { 
 
\t \t let page = this.state.appState.currentPage; 
 
\t \t let hideAbout = (page != 'about'); 
 
\t \t let hideHome = (page != 'home'); 
 
\t \t return (
 
\t \t \t <div id='AppCtrlSty' style={AppCtrlSty}> 
 
\t \t \t \t <div id='allPageSty' style={allPageSty}> 
 
\t \t \t \t \t <AboutPage hide={hideAbout} /> 
 
\t \t \t \t \t <HomePage hide={hideHome} /> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
let getState = function() { return {appState: AppStore.getAppState(),}; }; 
 

 
export default class AppCtrl extends AppCtrlRender { 
 
\t constructor() { 
 
\t super(); 
 
\t \t this.state = getState(); 
 
\t } 
 

 
\t componentDidMount =() => { this.unsubscribe = AppStore.listen(this.storeDidChange); } 
 
\t componentWillUnmount =() => { this.unsubscribe(); } 
 
\t storeDidChange =() => { this.setState(getState()); } 
 
}

在頁面/組件檢查this.props.hide。

export default class AboutPage extends Component { 
 
\t render() { 
 
\t \t if (this.props.hide) return null; 
 
\t \t return (
 
\t \t \t <div style={AboutPageSty}> 
 
\t \t \t \t React 1.4 ReFlux used for app state. This is the About Page. 
 
\t \t \t \t <NavMenu /> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}

來源

2015-10-23 16:23:30

你如何在JS中使用'class'？它只屬於ES6嗎？ – Victor

Babel是es6最受歡迎的解析器。 –

兄弟姐妹需要共享某種在陣營國家的通常是您需要進一步拉狀態了組件層次結構，並有一個共同的父管理它（或拉出一個線索成Redux等狀態管理解決方案）。

對於同級部件，其中只有一個可以同時是活動的，則需要狀態的關鍵部分是一些東西，用於標識其中之一是當前活動的，並且：

通該狀態到每個部件作爲一個道具（所以組件本身可以檢查它是否當前是活動的 - 例如，如果每個項目具有關聯的ID，則將當前活動的ID存儲在父組件中並將它作爲activeId道具傳遞給它們中的每一個）

例如：

var Nav1 = React.createClass({ 
    getInitialState() { 
    return {activeId: null} 
    }, 
    handleChange(activeId) { 
    this.setState({activeId}) 
    }, 
    render() { 
    return <div className="Nav"> 
     {this.props.items.map(item => 
     <NavItem 
      activeId={this.state.activeId} 
      item={item} 
      onClick={this.handleChange} 
     /> 
    )} 
    </div> 
    } 
})

或者用它來推導出被傳遞到每個組件的新道具（諸如active丙告訴每個組件是否是當前活動 - 例如在上面的id示例中，在呈現它時檢查每個組件的ID：active={activeId === someObj.id}）

例如，：

var Nav2 = React.createClass({ 
    // ... rest as per Nav1... 
    render() { 
    return <div className="Nav"> 
     {this.props.items.map(item => 
     <NavItem 
      active={this.state.activeId === item.id} 
      item={item} 
      onClick={this.handleChange} 
     /> 
    )} 
    </div> 
    } 
})

與之反應的技巧是認爲你的UI在你需要渲染，如果從頭開始（因爲如果你是渲染服務器上）的狀態而言，而不是個別DOM改變思維需要使UI反映狀態更改（如在jQuery示例中），因爲React會根據來自兩種不同狀態的完整呈現爲您處理這些單個DOM更改。

來源

2015-10-23 17:13:13

ReactJS在多個組件之間保持單個「活動」狀態

回答

相關問題