將 jsx 內容傳遞給 redux 狀態並從那里渲染它

Question

我在弄清楚如何將 JSX 傳遞到我的 redux 狀態時遇到了麻煩，即對於全局使用的模態組件並具有其 redux 狀態，其中一個參數是content此類內容可以更新為包括 JSX 代碼。

目前，我正在讓它呈現正確的內容，但似乎沒有正確調用函數，而且我還收到以下錯誤：

invariant.js:38 Uncaught Error: Objects are not valid as a React child (found: object with keys {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
});

然后我嘗試在我的 Modal 容器中呈現這些內容：

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

我將React導入到我的減速器中，希望能解決 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>
)

Answer 2

嘿，現在已經有一段時間了，但為了記錄，我偶然發現了您在對已接受答案的回復中解釋的相同用例。

您可以通過添加JsxElement | 的屬性來實現這一點。 反應元素| modalSlice 狀態中的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));

干杯!