首页 文章

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

提问于
浏览 次
4

我无法弄清楚如何将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，view，detail，screenX，screenY，clientX，clientY，ctrlKey，shiftKey，altKey，metaKey，getModifierState，button，buttons，relatedTarget，pageX，pageY}） . 如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象 . 检查styled.div的render方法 .

有很多以下错误：

warning.js：36警告：出于性能原因，将重复使用此合成事件 . 如果您看到这个，那么您将在已发布/无效的合成事件上访问属性nativeEvent . 这被设置为null . 如果必须保留原始合成事件，请使用event.persist（） . 有关详细信息，请参阅https：// fbme（替换为，因此不允许链接到fb）/ react-event-pooling .

Example implementation:

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

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 .

javascript reactjs redux

1 回答

  • 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>
)
    回复于

相关问题