empty-ghost

该组件允许开发者在不影响页面布局的情况下插入内容，同时通过 React 的 ref 功能获取到其子元素的真实 DOM 并且事件传递

📦 Installation

npm install empty-ghost

🔨 Usage

/**EmptyGhost Demo**/
import Ghost from "empty-ghost";
/**
 * The function of the EmptyGhost is to render not only children, but also click events in the proxy children
 * It is equivalent to rendering < div > {children} < / div > but deleting the div after the first rendering
 **/
export function App() {

    return (
        <Ghost
            ref={(ref)=>{
                console.log('You will get the divs ref !!!',ref);
            }}
            onClick={(e)=>{
                console.log('any event you can add to EmptyGhost ',e);
            }}
        >
            <div>123</div>
        </Ghost>
    );
}

🖥️

🏠 Exports

|参数|类型| |---|---| |📒EmptyGhostProps|Interfaces| |🎗️default|Functions|

📒Interfaces

EmptyGhostProps

|参数|类型|说明|默认值| |---|---|---|---| |is|?: string||| |style|?: Omit<React.CSSProperties, "display">|自定义样式，禁止覆盖 `display` 属性，因为组件内部强制使用 `display: contents`||

🎗️Functions

EmptyGhost

• EmptyGhost(props:EmptyGhostProps & React.RefAttributes<null | Element | Text>): React.ReactNode