PortalRenderer 命令式Dom

将声明式的组件转换成命令式组件。

基础用法

import { Button, portalRenderer } from 'ono-react-element'

const MyComponent = ({ destroy }: { destroy: () => void }) => {
  return (
    <div
      style={{
        top: 0,
        left: 0,
        position: 'fixed',
        width: '100vw',
        height: '100vh',
        background: 'rgba(0,0,0,0.5)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <div
        style={{
          width: 500,
          height: 300,
          background: 'white',
          border: '1px solid #333',
          borderRadius: 4,
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <h1>This is my component</h1>
        <Button
          style={{ position: 'absolute', right: 16, bottom: 16 }}
          onClick={destroy}
        >
          Close
        </Button>
      </div>
    </div>
  )
}

function App() {
  return (
    <div style={{ width: '100%', display: 'flex', gap: 10 }}>
      <Button onClick={() => portalRenderer(MyComponent, {}, 'my-component')}>
        Open My Component
      </Button>
    </div>
  )
}

export default App;

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
Component	传入组件的props必须带有destroy函数属性	(props: T) => JSX.Element	-	是
props	传入组件的props，除了destroy函数属性	Omit<T, "destroy">	-	是
id	dom的id，destroy函数会根据传入的id删除对应的dom	string	-	否

ComponentProps

参数	说明	类型	默认值	是否必填
destroy	命令式组件的销毁函数	(onDestroy?: () => void) => void	-	是