javascript - 使用 refs 从父调用子钩子(Hook)函数

Question

我正在切换到使用 Hooks 构建组件，并且我正在努力使用 useRef() 设置 refs

父级(ref 目前只添加到一个组件，因为我想在将功能扩展到其他组件之前确保它正常工作):

export default function UserPanels({ selected_client } ) {
    const classes = useStyles();
    const [value, setValue] = useState(0);
    const container = useRef( null );

    function handleChange(event, newValue) {
        setValue(newValue);
        container.current.displayData();
    }

    return (
        <div className={classes.root}>
            <UserTabs
                value={value}
                onChange={handleChange}
                indicatorColor="primary"
                textColor="primary"
                variant="fullWidth"
                aria-label="full width tabs example"
            >
                <Tab label='Service User' {...a11yProps(0)} />
                <Tab label='Care Plan' {...a11yProps(1)} />
                <Tab label='Contacts' {...a11yProps(2)} />
                <Tab label='Property' {...a11yProps(3)} />
                <Tab label='Schedule' {...a11yProps(4)} />
                <Tab label='Account' {...a11yProps(5)} />
                <Tab label='Invoices' {...a11yProps(6)} />
                <Tab label='Notes' {...a11yProps(7)} />
                <Tab label='eMAR' {...a11yProps(8)} />
            </UserTabs>
            <TabPanel value={value} index={0}>
                <UserDetailsContainer
                    selected_client={ selected_client }
                />
            </TabPanel>
            <TabPanel value={value} index={1}>
                Care Plan
            </TabPanel>
            <TabPanel value={value} index={2}>
                <ContactsContainer
                    ref={ container }
                    selected_client={ selected_client }
                />
            </TabPanel>
            <TabPanel value={value} index={3}>
                Property
            </TabPanel>
            <TabPanel value={value} index={4}>
                Schedule
            </TabPanel>
            <TabPanel value={value} index={5}>
                Account
            </TabPanel>
            <TabPanel value={value} index={6}>
                Invoices
            </TabPanel>
            <TabPanel value={value} index={7}>
                Notes
            </TabPanel>
            <TabPanel value={value} index={8}>
                eMAR
            </TabPanel>
        </div>
    );
}

child :

export default function ContactsContainer( props ) {
    const [ state, setState ] = useState({
        contact_records: contacts,
        data_ready: true
    });

    function displayData() {
        console.log( 'display time' );
    }

    if ( !state.data_ready ) return null

    return (
        <>
            {
                state.contact_records.map( ( contact ) => {
                    return <ContactRecord contact={ contact } />
                } )
            }
        </>
    )
}

本质上，我试图从父函数调用子函数，但 ref.current 求值为 null 并且当 handleChange()调用时我收到错误 container.current is null 并且我经常看到错误 Function components cannot be given refs.尝试访问此 ref 将失败。您是想使用 React.forwardRef() 吗？

请注意，我已经测试了forwardRef:

<ContactsContainer
    ref={ container }
    selected_client={ selected_client }
 />

而且，虽然这消除了错误，但并没有解决问题。我从来没有遇到过将 refs 与类组件一起使用的问题，但我似乎在这里遗漏了一些东西。

Answer 1

首先，不要过度使用 refs ( react doc )。您不得通过直接调用其功能来控制您的子组件(老实说，您不能对功能组件执行此操作)。

如果你需要在你的 child 中显示一些东西，你必须在你的父组件中准备数据并通过 Prop 传递这些数据。 children 应该尽可能简单。他们应该获得 Prop 并显示一些数据。

在 parent 中:

const [value, setValue] = useState(0);
const [time, setTime] = useState(null);
function handleChange(event, newValue) {
    setValue(newValue);
    setTime('display time');
}

return (
    ....
    <ContactsContainer
        time={time}
        selected_client={ selected_client }
     />
    ....
)

如果您需要在 props 更改时在您的 child 中产生一些副作用(例如进行 HTTP 调用、调度 Redux 操作)，您必须使用 useEffect钩子(Hook)。

在 parent 中:

<ContactsContainer
    value={value}
    selected_client={ selected_client }
 />

在 child 身上:

useEffect(() => {
  console.log('display time action');
}, [props.value]);