Question

是否有一种方法可以访问react组件的ref对象上的道具或数据属性。我一直在研究该组件，但没有发现任何东西。理想情况下，我想访问传递给它的有效道具。我愿意以其他方式获取数据，但如果可能的话，最好在ref对象中获取数据。

Answer 1

React refs是获取对react组件呈现的DOM元素的引用的一种好方法，因此您实际上无法通过ref来访问组件，而只能访问组件打印到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。

希望有帮助。

干杯！ ?

Answer 2

如果我了解您的要求，只需将其从ref中拉出即可获得属性。请看下面的例子。

const {useRef, useEffect} = React;

const Foo = () => {
    const ref = useRef(null);

    useEffect(() => {
        if (!ref.current) {
            return;
        }

        console.log(`data-foo is ${ref.current.dataset.foo}`);
    }, []);

    return <div ref={ref} data-foo="foo">I have a data attribute</div>;
};

const App = () => (
    <Foo/>
);

ReactDOM.render(<App/>, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.min.js"></script>

<div id="app"></div>

从React Ref对象访问道具

2 个答案: