將jsx內容傳遞給redux狀態並從那裏渲染

我無法弄清楚如何將JSX傳遞給我的redux狀態，即，對於全局使用的模式組件以及其中一個參數爲content的模式組件，此類內容可以是更新爲包含JSX代碼。將jsx內容傳遞給redux狀態並從那裏渲染

在我得到它呈現正確的內容但它似乎並不函數稱爲正確，我也越來越以下錯誤的時刻：

invariant.js:38 Uncaught Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of styled.div .

隨着大量以下錯誤：

warning.js:36 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fbme(replaced this as so doesn't allow links to fb)/react-event-pooling for more information.

實現示例：

功能從頁面調用顯示模式，並添加續已廢除它

onToggleModal =() => { 
    this.props.modalToggle(
     (<TopUp account={getSession().accounts[0] || {}} />) 
    ); 
    }

凡this.props.modalToggle是一個終極版的動作是這樣的：

export const modalToggle = (content = '') => ({ 
    type: MODAL_TOGGLE, 
    payload: content 
});

然後我試圖使我的模態容器內這樣的內容：

return (
<div>{this.props.content}</div> 
)

我進口React到我減速器，希望能解決jsx問題，但沒有運氣。它也好像組件被傳遞給reducer作爲一些奇怪的對象。

來源

2016-12-15 Ilja

如果你正在尋找一個'情態與模式redux'，我強烈建議這個方法：HTTP：//stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performing-asynchronous-actions我們目前在生產中使用它，它非常穩定。 – lux

@lux看起來不錯，我很難通過功能作爲道具，任何建議嗎？ – Ilja

Redux狀態只能包含普通對象和數據類型，所以JSX對象可能會導致問題。另外，將JSX對象（基本上是視圖）作爲您的狀態的一部分很可能不是一個好主意。

相反，您應該傳遞所需的任何數據來呈現最終視圖。我認爲這會工作：

onToggleModal =() => { 
    this.props.modalToggle(getSession().accounts[0] || {}); 
}

export const modalToggle = (account = {}) => ({ 
    type: MODAL_TOGGLE, 
    account: account 
});

來源

2016-12-15 15:22:23

但是，假設我們有一個更復雜的例子，其中模態應該顯示不同的組件，這些組件對於另一個模態視圖不一定是相同的。我能想到的唯一方法就是在Modal容器中預先定義所有這些視圖，並通過像您所建議的那樣通過redux將數據傳遞給它，以及某種類型的TYPE參數來告訴它要渲染哪個視圖，但似乎像一個非常嚴格的代碼實現，因此在這裏提出這個問題。如果沒有更好的答案彈出，我想我將不得不去用它。 – Ilja

將jsx內容傳遞給redux狀態並從那裏渲染

回答

相關問題