Question

我有一个情态成分。渲染后，我需要在模态上获取一个句柄，并向其div中添加一个附加类。将模态渲染到DOM后如何选择？

这就是我所拥有的。我试图用myModal()渲染我的Modal组件，并在return语句的下一行中用addClassToDiv()添加一个类。但是，我似乎无法成功添加该类。当我调用该函数时，似乎我仍要选择的div仍不在DOM上。

export const CustomModal = (props) => {
    
    const myModal = () => {
        return (
            <Modal>
                <div className="some-div">{props.text}</div>
            </Modal>
        );
    };

    const addClassToDiv = () => {
        document.querySelector('.some-div').classList.add('additional-class');
    };

    return (
        <>
            {myModal()}
            {addClassToDiv()}
        </>
    );
};

Answer 1

正如我在评论中提到的那样，您应该避免这样做。它可能会导致代码脆弱且难以维护，因此，如果您可以采用更标准的反应方式进行操作，则应该这样做。

如果您别无选择，只能进行此类操作（例如，因为您使用的外部库无法提供所需的交互点），则需要等到组件完成之后渲染以进行更改。您可以在useEffect中进行此操作：

export const CustomModal = (props) => {
    
    const myModal = () => {
        return (
            <Modal>
                <div className="some-div">{props.text}</div>
            </Modal>
        );
    };

    useEffect(() => {
      const element = document.querySelector('.some-div');
      if (element) {
        element.classList.add('additional-class');
      }
    }, []);

    return (
        <>
            {myModal()}
        </>
    );
};

如果这会导致不必要的闪烁，则可以将其切换为useLayoutEffect。

请注意，react不知道您正在进行这些更改，因此不会采取任何步骤来保留您的更改。在某些情况下，Modal中的代码可能最终会覆盖您所做的事情。

Answer 2

尝试这种方法，

 export const CustomModal = ({text}) => {

    useEffect(() => {
      const element = document.querySelector('.some-div');
      if (element) {
        element.classList.add('additional-class');
      }
    }, []);

    return <MyModal text={text}/>;
};

将MyModal创建为单独的组件：-

const MyModal = ({text}) => 
           <Modal>
                <div className="some-div">{text}</div>
            </Modal>;

渲染后选择/操作模态

2 个答案: