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

Question

我无法弄清楚如何将 JSX 传递到我的 redux 状态，即对于全局使用的模态组件，并具有其 redux 状态，其中一个参数是content这样的内容可以更新以包含 JSX 代码。

目前，我正在让它呈现正确的内容，但似乎没有正确调用函数，而且我还收到以下错误：

invariant.js：38未捕获错误：对象作为React子项无效（发现：带有键的对象{dispatchConfig，_targetInst，isDefaultPrevented，isPropagationStopped，_dispatchListeners，_dispatchInstances，nativeEvent，type，target，currentTarget，eventPhase，bubbles，cancelable，timeStamp 、defaultPrevented、isTrusted、视图、详细信息、screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、按钮、按钮、relatedTarget、pageX、pageY}）。如果您打算渲染子集合，请使用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 的渲染方法styled.div。

有很多以下错误：

warning.js:36 警告：出于性能原因重用此合成事件。如果您看到此内容，则说明您正在访问 nativeEvent已发布/无效的合成事件的属性。这被设置为空。如果必须保留原始合成事件，请使用 event.persist()。请参阅https://fbme（将其替换为不允许链接到 fb）/react-event-pooling 了解更多信息。

实施示例：

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

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

哪里this.props.modalToggle有像这样的 redux 操作：

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

然后我尝试在我的模态容器中渲染此类内容：

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

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

Answer 1

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

相反，您应该传递渲染最终视图所需的任何数据。我认为这会起作用：

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

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

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