将 jsx 内容传递给 redux 状态并从那里渲染答案

【问题标题】：Passing jsx content to redux state and rendering it from there将 jsx 内容传递给 redux 状态并从那里渲染
【发布时间】：2017-05-01 06:09:03
【问题描述】：

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

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

invariant.js:38 未捕获错误：对象作为 React 子对象无效（找到：带有键的对象 {dispatchConfig，_targetInst， isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances、nativeEvent、类型、目标、currentTarget、eventPhase、气泡、可取消、时间戳、defaultPrevented、 isTrusted、查看、详细信息、screenX、screenY、clientX、clientY、ctrlKey、 shiftKey，altKey，metaKey，getModifierState，按钮，按钮，相关目标，pageX，pageY}）。如果你打算渲染一个集合孩子，使用数组代替或使用包装对象来自 React 附加组件的 createFragment(object)。检查渲染方法 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。

【问题讨论】：

如果您正在寻找带有模态的redux 模式，我强烈建议这种方法：stackoverflow.com/questions/35623656/… 我们目前在生产中使用它，它非常稳定。
@lux 看起来不错，但我在将函数作为道具传递时遇到了困难，有什么建议吗？

标签： javascript reactjs redux

【解决方案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>
)

【讨论】：

但是假设我们有一个更复杂的示例，其中模态应该显示不同的组件，这些组件对于另一个模态视图不一定相同。我能想到的唯一方法是在 Modal 容器中预定义所有这些视图，并像你建议的那样通过 redux 和某种 TYPE 参数来告诉它要渲染哪个视图，可以完成，但似乎就像一个代码量很大的实现，因此在这里问这个问题。如果没有更好的答案弹出我想我将不得不接受它。

【解决方案2】：

嘿，现在已经有一段时间了，但为了记录，我偶然发现了您在对已接受答案的回复中解释的同一个用例。

您可以通过添加 JsxElement 的属性来实现此目的 | 反应元素 | HTMLElement 输入您的 modalSlice 状态：

export interface modalState {
  active: boolean;
  component?: ReactElement;
}

reducers: {
   updateModalComponent: (state, value: PayloadAction<ReactElement>) => {
      state.component = value.payload;
   },
}

那么你的模态组件文件可能看起来像这样：

import { ReactElement } from 'react';
import './modal.scss';

interface Props {
    active: boolean,
    children: ReactElement | JsxElement | HTMLElement,
}

export const Modal = (props: Props) => {
    return (
        <div id="modal-container">
            {
                props.active &&
                <div id="overlay">
                    <div id="modal-content-container">
                        {props.children}
                    </div>
                </div>
            }
        </div>
    )
}

终于可以在任何地方使用它了！

const element = <OtherComponent />;
dispatch(updateModalComponent(element));

干杯！

【讨论】：