如何在ref内插入属性和函数？

问题描述

如何在ref内插入属性和函数？像这个例子：

X_train,X_test,y_train,y_test = train_test_split(X,y,test_size = 10000,random_state = 42)

然后我要以这种方式使用属性const MyComponent = () => { const [loading,setLoading] = React.useState(false) const onTest = () => 'works' return ( <div {...props}> ) } 和函数loading：

onTest

我该怎么做？

解决方法

您无法在功能组件上设置ref，因为它们没有实例。

您不能在功能组件上使用ref属性，因为它们没有实例。

（来源：https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs）

要使您的示例正常工作，您需要将<MyComponent />转换为class component。

const Test = () => {
  const myRef = React.useRef();

  React.useEffect(() => {
    if (myRef.current)
      console.log(
        "loading is " +
          myRef.current.state.loading +
          " function is " +
          myRef.current.onTest()
      );
  });

  return <MyComponent ref={myRef} />;
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  onTest() {
    return "works";
  }

  render() {
    return <h1>MyComponent</h1>;
  }
}

ReactDOM.render(<Test />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>