app.js 无法给children添加兄弟元素,不支持全局Modal吗 ?

[vaynevayne]

"@tarojs/taro": "3.6.20",

import ModalApi from './components/ModalApi'
import './app.scss' // 内部 @import '~taro-ui/dist/style/components/modal.scss';

function App({ children }) {

  return (
    <>
      {children}
      <ModalApi></ModalApi>
    </>
  )
  // children 是将要会渲染的页面
}

export default App

import { AtModal } from 'taro-ui'
import { AtModalProps } from 'taro-ui/types/modal'
import { create } from 'zustand'

type State = {
  modals: Omit<AtModalProps, 'isOpened'>[]
}
export const useModalStore = create<State>(() => ({
  modals: [],
}))

export const showModalAPi = (modalProps: State['modals'][number]) =>
  useModalStore.setState(state => ({
    modals: state.modals.concat(modalProps),
  }))

export const hideModalApi = () =>
  useModalStore.setState(state => ({
    // 简单场景 移除最后一个
    modals: state.modals.filter((_modal, index) => index !== state.modals.length - 1),
  }))

const ModalApi = ({}) => {
  const modals = useModalStore(state => state.modals)

  const onCloseHandler = () => {
    hideModalApi()
  }
  // 取消按钮
  const onCancelHandler = () => {
    hideModalApi()
  }

  return modals.map((modal, index) => (
    <AtModal
      key={index}
      isOpened={true}
      title=""
      cancelText="取消"
      confirmText="确认"
      onClose={onCloseHandler}
      onCancel={onCancelHandler}
      {...modal}
    />
  ))
}

export default ModalApi

// 点击无效, 无事发生, 在 h5 能成功

 showModalAPi({
            content:
              'test。',
          })

[ShaoGongBra]

小程序上，那肯定是不行的