javascript - 从 React Ref 对象访问 Props

Question

有没有办法访问 React 组件的 ref 对象上的 props 或数据属性。我一直在挖掘该组件，但没有发现任何东西。理想情况下，我想访问我传递给它的有效 Prop 。我愿意以另一种方式获取数据，但最好是在 ref 对象中(如果可能的话)。

Answer 1

React refs 是获取 React 组件渲染的 DOM 元素引用的好方法，因此您实际上无法通过 refs 访问组件，而只能访问组件打印到 DOM 的最新快照。看看docs here 。但是，您确实可以访问 DOM 数据属性。以下是其工作原理的示例。 (注意:这不是通过应用程序传输数据的好方法)

import React from "react";

const CustomDiv = ({ customRef, someProp }) => <div ref={customRef} data-custom-attr={someProp} />;

export default function App() {
    const customRef = React.createRef();

    const clicked = () => {
        console.log(customRef.current);
        console.log(customRef.current.getAttribute("data-custom-attr"));
    };

    return (
        <div className="App">
            <CustomDiv customRef={customRef} someProp={"21"} />
            <button onClick={clicked}>Click Me</button>
        </div>
    );
}

单击按钮后控制台日志将如下所示:

<div data-custom-attr="21"></div>
21 

您可以查看工作示例 here .

希望有帮助。

干杯! 🍻