jsxコンテンツを還元状態にしてそこからレンダリングする

Question

JSXを私の還元状態、つまりグローバルに使用されるモーダルコンポーネントに対してどのように渡すかを調べるのに問題があります。その1つのパラメータがcontentの場合は還元状態です。 JSXコードを含むように更新されました。次のエラーの多い

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.

の実装例：モーダルを表示すると続きを追加するページから呼び出さ

機能

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

私はその後、私のモーダルコンテナ内で、このようなコンテンツをレンダリングしよう：

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

私は私にReactを輸入し、それ

this.props.modalToggleはこのようなReduxのアクションです

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

にエントJsxの問題を解決することを望んでいたが、運がなかった。それはコンポーネントが奇妙なオブジェクトのいくつかの並べ替えのような減速機に渡されるようにも思える。

Answer 1

Redux状態には単純なオブジェクトとデータ型しか含まれないため、JSXオブジェクトによって問題が発生する可能性があります。また、あなたの状態の一部としてJSXオブジェクト（基本的にはビューです）を持たせるのは良い考えではありません。

代わりに、最終ビューのレンダリングに必要なすべてのデータを渡す必要があります。私はこれが仕事だと思う：

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

---

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

---

​​