Question

是否可以创建函数组件的实例，例如c＃和JAVA之类的常规类，您可以在该实例上调用函数？就像是： https://codesandbox.io/s/hungry-microservice-bp292?file=/src/App.js

它必须是一个实例，以便该组件可以在多个位置使用其自己的实例和值。不像静态类。

import React from "react";
import "./styles.css";
import MyFunc from "./MyFunc";

export default function App() {
  const addAlert = () => {
    MyFunc.addAlert("dasdsad");
  };

  return (
    <div className="App">
      <button onClick={addAlert}>Add alert</button>
      <MyFunc />
    </div>
  );
}

Answer 1

您正在混合使用ReactJS和底层DOM的不同概念。无法获得功能组件本身的引用。最多可以使用forwardRef来获取对基础DOM元素的引用。您可以了解有关Refs and the DOM和Forwarding Refs的更多信息。

请记住，您可以通过将状态提升到父级来更改方法，例如

App.js

export default function App() {
  const [alerts, addAlerts] = useState(["Alert1", "Alert2"]);

  const addAlert = () => {
    addAlerts(alerts.concat("dasdsad"));
  };

  return (
    <div className="App">
      <button onClick={addAlert}>Add alert</button>
      <MyFunc alerts={alerts}/>
    </div>
  );
}

MyFunc.js

const MyFunc = props => {
 
  return (
    <>
      {props.alerts && props.alerts.map((alert, index) => (
        <div>{alert}</div>
      ))}
    </>
  );
};

export default MyFunc;

用功能反应功能组件

1 个答案: