javascript - 将 jsx 内容传递给 redux 状态并从那里渲染它

Question

我无法弄清楚如何将 JSX 传递到我的 redux 状态，即对于全局使用的模态组件并具有其 redux 状态，其中一个参数是 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.

示例实现:

从页面调用以显示模态并向其添加内容的函数

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

this.props.modalToggle 是这样的 redux Action :

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

然后我尝试在我的模态容器中呈现此类内容:

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

我将 React 导入到我的 reducer 中，希望能解决 jsx 问题，但没有成功。组件似乎也作为某种奇怪的对象传递给 reducer。

Answer 1

Redux 状态只能包含普通对象和数据类型，因此 JSX 对象可能会导致问题。此外，将 JSX 对象(基本上是一个 View )作为状态的一部分很可能不是一个好主意。

相反，您应该传递呈现最终 View 所需的任何数据。我认为这会起作用:

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

---

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

---

return (
 <div><TopUp account={account} /></div>
)