如何从其父组件访问自定义反应组件功能？答案

【问题标题】：how to access a custom react component function from its parent component?如何从其父组件访问自定义反应组件功能？
【发布时间】：2020-08-12 20:47:03
【问题描述】：

我想创建一个组件的新实例，然后使用该组件中的一个函数来添加添加一个新对象。没有什么对我有用。这是我的代码：

保存列表的组件和添加新事件卡的功能

function EventDay (props) { 

   const [ events, setEvents ] = useState([{eventName: "first event"}]);

   function addEvent(eventCard) {
      setEvents( prevEvents => [...prevEvents, eventCard]);
   }

   return console.log(events);
}

export default EventDay;

想要访问 addEvent 函数的组件

import EventDay from "./EventDay"

function App() {
   const eventDay = new EventDay();

   eventDay.addEvent({eventName: "New Event"});

}

我得到一个错误 addEvent is not a function。我试图导出它，但我不能，因为它是函数中的函数。我怎样才能实现上述目标？

【问题讨论】：

标签： javascript reactjs react-hooks react-component

【解决方案1】：

Hooks 只能在功能组件内部使用，不能用作构造函数。标准答案是将状态处理移至包装组件（App），并将状态传递给 EventDay：

const { useState, useCallback, useEffect } = React;

const EventDay = ({ events }) => events.map((o, i) => (<li key={i}>{o.eventName}</li>));

function App() {
  const [events, setEvents] = useState([{eventName: "first event"}]);
  
  const addEvent = useCallback(eventCard => setEvents(prevEvents => [...prevEvents, eventCard]), []);
  
  useEffect(() => {
    setTimeout(() => {
      addEvent({eventName: "new event"});
    }, 1000);
  }, [addEvent])
  
  return (
    <ul>
      <EventDay events={events} />
    </ul>
  );
}

ReactDOM.render(
  <App />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

但是，如果您必须从组件中获取函数，则可以使用 ref 和 useImperativeHandle 挂钩：

const { forwardRef, useState, useImperativeHandle, useRef, useEffect } = React;

const EventDay = forwardRef((props, ref) => { 
  const [events, setEvents] = useState([{eventName: "first event"}]);

  useImperativeHandle(ref, () => ({
    addEvent(eventCard) {
      setEvents(prevEvents => [...prevEvents, eventCard]);
    }
  }));

  return events.map((o, i) => (<li key={i}>{o.eventName}</li>));
});

function App() {
  const eventRef = useRef();
  
  useEffect(() => {
    setTimeout(() => {
      eventRef.current.addEvent({eventName: "new event"});
    }, 1000);
  }, [])
  
  return (
    <ul>
      <EventDay ref={eventRef} />
    </ul>
  );
}

ReactDOM.render(
  <App />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：