什麼是在React + Redux.js應用程序中操作提供程序組件之外的DOM元素的正確方法？

我正在創建一個React + Redux原型應用程序，我面臨的情況是我想操作提供程序組件外的DOM。什麼是在React + Redux.js應用程序中操作提供程序組件之外的DOM元素的正確方法？

我在我的陣營+終極版的應用程序根組件：

class App extends Component { 

    render() { 

    return (
     <div> 
     <Provider store={store}> 
      <Main /> 
     </Provider> 
     <DebugPanel top right bottom> 
      <DevTools store={store} monitor={LogMonitor} /> 
     </DebugPanel> 
     </div> 
    ) 
    } 
};

我主內一個按鈕，我想用隱藏的DebugPanel。出於這個原因，我想操縱DebugPanel組件類，或者它上面的任何元素。

這使我以下的問題：

我將如何操作DebugPanel的className？
如何操作Provider組件外部的DOM元素，例如body或html標籤？
商店狀態更改只能在提供商內部收聽，還是我誤解了？
所有這些都可以用一點jQuery解決。我可以把它放到商店裏，但那會是一個有效的解決方案嗎？
什麼是「純正的Redux」方法？

如果你想看看代碼，它可以在我的git發現： https://github.com/JaakkoKarhu/redux-react-blockgenerator

很抱歉，如果代碼是有點亂，我可能會推有一個在很多廢話此時此刻。

我希望這個問題不是太寬泛，我正在尋找一種'最佳實踐'類型的方法。

編輯：

編輯整個問題來更好地描述什麼使我困惑。

來源

2015-10-28 Jaakko Karhu

首先：它看起來像你的代碼是你的React.render（）函數。最佳做法是隻調用一次該函數，以安裝您的反應代碼。所以首先：改變你的初始渲染爲：

React.render(
    <Main/>, 
    document.getElementById('main') 
);

並把所有其他的東西放在一個完整的反應組件。

至於你真正的問題： 直接的方式做到這一點：

放入根組件的狀態的類名。
在更新狀態的根組件中添加一個函數。
將此函數作爲通道傳遞給您的組件。

當App組件中的按鈕被點擊時，根狀態會改變，DevTools會被重新渲染爲新類。

你的根組件的代碼將隨後包括：

getInitialState() { 
    return { devToolsClassName : 'dev-hidden' }; 
} 

onClickInApp() { 
    this.setState({ devToolsClassName : 'dev-visible' }); 
}

內主要會看包括以下更改渲染功能：

... 
     <App clickHandler={this.onClickInApp}/> 
... 
     <DevTools className={this.state.devToolsClassName} store={store} monitor={LogMonitor} />

裏面你，你將有一個函數（綁定到按鈕點擊）像：

_onClick() { 
    this.props.onClickInApp() 
}

這將工作，但兒童的部分在父類中調用一個函數可以說是一種反模式（儘管對此的看法各不相同）。

所以選擇：純流量的方式來做到這一點：

將一個showDevTools布爾在商店裏。
讓您的根組件從每個商店更改的商店中獲取它。
這也會觸發重新渲染。

來源

2015-10-28 12:50:20 wintvelt

改變了初始渲染的建議。但是我不完全明白你的答案，可能是因爲我注意到我的問題也有點不清楚。我正在尋找一種「純正的Redux」方式來做到這一點，如果有的話。 –

我編輯了整個問題，以更好地描述出什麼錯誤。對不起，如果你的答案不再適用，麻煩。 –

您的一組問題仍然多樣化，並不總是很清楚：「外部提供商」包括''（位於您的應用範圍內）和''（位於您的應用範圍之外）。最佳方法有很大差異。但無論如何，我對redux並不熟悉，所以希望其他人可以在這裏提供更有幫助的答案。 – wintvelt

什麼是在React + Redux.js應用程序中操作提供程序組件之外的DOM元素的正確方法？

回答

相關問題