Append 點擊時反應組件

Question

我正在嘗試編寫一個在單擊元素時出現的工具提示組件。 我見過這種組件的實現，其中工具提示有點包裹在另一個元素上，但這不適合我。 我在想也許因為我可以訪問 event.target 我只是 select 目標的父級，然后創建一個工具提示組件的新實例，其絕對定位是從目標的 position 和 Z9516DFB15F51C7EE19A4D46B8C0 計算得出的，但我得到一個錯誤我的 Tooltip 的新實例不是節點類型，因此它不是有效的子節點。 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Tooltip 是一個 class 組件，它只返回一個帶有一些文本的<div> ：

class Tooltip extends React.Component {
    constructor(props) {
        super(props);
    }

    basicStyle = {
        width: 80,
        height: 30,
        backgroundColor: '#333333',
        position: 'absolute',
        left: this.props.tooltipLeft,
        right: this.props.tooltipTop,
    };

    render() {
        return <div style={this.basicStyle}>tooltip</div>;
    }
}

這是此演示應用程序的代碼：

import React from 'react';
import Tooltip from './Tooltip';
import './App.css';

function App() {
    const clickHandler = (event) => {
        //get coordinates to position a Tooltip
        const pos = event.target.getBoundingClientRect();
        const tooltipLeft = pos.left + pos.width / 2;
        const tooltipTop = pos.top - 20;

        const tooltip = new Tooltip(tooltipLeft, tooltipTop);

        const parent = event.target.parentNode;
        parent.appendChild(tooltip);
    };

    return (
        <div className='wrapper'>
            <div className='box one' onClick={clickHandler}></div>
            <div className='box two' onClick={clickHandler}></div>
            <div className='box three' onClick={clickHandler}></div>
        </div>
    );
}

export default App;

我也嘗試通過使用門戶對useRef和ReactDOM做同樣的事情（不確定它是否是正確的使用方式），但它沒有幫助，即使點擊時不再顯示錯誤消息，只是沒有任何反應. 在這種情況下，我使用的代碼如下：

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import Tooltip from './Tooltip';
import './App.css';

function App() {
    const parentRef = useRef(null);

    const clickHandler = (event) => {
        //get coordinates to position a Tooltip
        const pos = event.target.getBoundingClientRect();
        const tooltipLeft = pos.left + pos.width / 2;
        const tooltipTop = pos.top - 20;

        const tooltip = new Tooltip(tooltipLeft, tooltipTop);
        ReactDOM.createPortal(tooltip, parentRef.current);
    };

    return (
        <div className='wrapper' ref={parentRef}>
            <div className='box one' onClick={clickHandler}></div>
            <div className='box two' onClick={clickHandler}></div>
            <div className='box three' onClick={clickHandler}></div>
        </div>
    );
}

export default App;

我覺得我在這里遺漏了一些明顯的東西，但我無法得到它。 有人可以向我解釋我在兩次嘗試中做錯了什么嗎？

更新：我意識到我應該多說一點：對我想要實現的目標進行一點解釋。 基本上，我正在構建一個能夠自定義其上的每個元素的站點，這就是該工具提示組件的作用。 我在這里沒有使用條件渲染，因為這需要我手動將鈎子/條件添加到可以調用工具提示的每個可能的位置，或者僅使用具有不同位置和內容的一個實例。 我需要能夠為大量元素顯示多個工具提示，並且它們應該能夠同時打開，這就是我使用 class 組件和 appendChild() 的原因。

Answer 1

您應該使用 clickhandler 更新您的 state，然后根據 state 有條件地繪制工具提示。 我承認我以前沒有使用過門戶，所以我不確定，但“狀態”方式非常簡單。

基本上是這樣的：

const [pos,updatePos] = useState(null)

const clickHandler = (event) => {
    updatePos(event.target.getBoundingClientRect())
}

return (
        <div className='wrapper' ref={parentRef}>
            <div className='box one' onClick={clickHandler}></div>
            <div className='box two' onClick={clickHandler}></div>
            <div className='box three' onClick={clickHandler}></div>
            { pos && (<ToolTip position={pos}/>) }
        </div>
    );

Answer 2

所以看起來你不能只是使用appendChild()來整理 append 反應組件，因為appendChild()是本機 javascript ZC1C425268E68385D1AB5074C17A7A94F14Z 組件的情況下是 render() 的方法組件（僅在類的情況下）和返回值object 而不是任何方式的節點（因為 react 為您管理 DOM）。 但是我不知道為什么門戶網站不起作用，因為我對它們了解不多。

如果有人感興趣，我還設法編寫了一個控制工具提示的自定義鈎子/組件。 我最終使用 useState 掛鈎來存儲數組所有活動的工具提示和調用這些工具提示的元素數組。 這只是一個原始原型，但它正在工作。 稍后我會添加一些功能並完善它，但現在它只是一個工具提示虛擬對象。

https://codepen.io/ClydeTheCloud/pen/MWKJQza