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

Question

我有麻烦弄清楚如何传递JSX到我的还原状态，即用于全局使用的模态组件，其还原状态，其中一个参数是内容，这样的内容可以更新为包括JSX代码。

目前，我正在使其呈现正确的内容，但似乎函数调用不正确，并且我还遇到以下错误：

invariant.js:38未捕获错误：对象作为React子对象无效（找到：具有键的对象{dispatchConfig、\u TargetList、isDefaultPrevented、isPropagationStopped、\u dispatchListeners、\u dispatchInstances、nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted、view、detail、screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、rRelatedTarget，pageX，pageY}）。如果要渲染子对象集合，请改用数组或使用React加载项中的createFragment（object）包装对象。请检查styled.div的渲染方法。

有很多以下错误：

警告：由于性能原因，此合成事件被重用。如果您看到了这一点，那么您正在访问一个已发布/无效的合成事件的属性nativeEvent。这被设置为null。如果必须保留原始合成事件，请使用event.persist（）。看见https://fbme（将其替换为不允许链接到fb）/反应事件池以获取更多信息。

实施示例：

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

  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导入到我的reducer中，希望解决jsx问题，但运气不佳。组件似乎也是作为某种奇怪的对象传递给reducer的。




Answer 1

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

您可以通过在modalSlice状态中添加JsxElement|ReactElement|HTMLElement类型的属性来实现这一点：

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

干杯

Answer 2

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