Question

我无法弄清楚如何将JSX传递到我的redux状态，即对于全局使用的模态组件，并且其redux状态，其中一个参数为content，此类内容可以更新为包含JSX代码。 / p>

目前我正在使用它来呈现正确的内容，但似乎没有正确调用函数并且我也遇到以下错误：

invariant.js：38未捕获错误：对象作为React子对象无效（找到：带键的对象{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}）。如果你想渲染一个集合 children，使用数组代替或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法 styled.div。

有很多以下错误：

warning.js：36警告：此合成事件将重复用于提高性能原因。如果您看到这个，那么您正在访问该物业已发布/无效的合成事件nativeEvent。这是设置为空值。如果您必须保留原始合成事件，请使用 event.persist（）。请参阅https://fbme(replaced这样，因此不允许链接到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
});

然后我尝试在我的Modal容器中呈现这样的内容：

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

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

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>
)

将jsx内容传递给redux状态并从那里呈现它

1 个答案: