Javascript 使用refs从父级调用子钩子函数

我正在切换到使用钩子构建构件，我正在努力使用

useRef（）

父级（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>
    );
}

---

而且，虽然这消除了错误，但并不能解决问题。我从未遇到过在类组件中使用refs的问题，但我似乎遗漏了一些东西。

首先，不要过度使用

refs

（）。您不能通过直接调用子组件的函数来控制子组件（老实说，您不能通过函数组件来实现这一点）

如果需要在子组件中显示某些内容，则必须在父组件中准备数据并通过道具传递这些数据。孩子们应该尽可能简单。他们应该得到道具和显示一些数据

在父项中：

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 }
     />
    ....
)

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

儿童：

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

---

您可以将ref作为道具传递：

// ...
const infoRef=useRef(null)
useEffect(()=>{
    if(infoRef.current) infoRef.current()
},[])
return <ChildComponent infoRef={infoRef} />

---

因此，通过单击与子项索引匹配的选项卡（索引），可以实现这一点。因此，如果我将

所选索引

向下传递给每个子级，并且当

所选索引

发生变化时，检查它是否与子级匹配，如果为真，则显示一些数据，这将是更好的选择？@AdamRoberts No。显示一些数据不是副作用。如果只需要显示数据，则必须在父组件中准备数据，并通过道具传递给子组件。我已经更新了答案。数据是从子项生成的，但是否显示由父项决定。很难解释，但现在一切都好了-你最初的回答让我听懂了，谢谢：）

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

// ...
const infoRef=useRef(null)
useEffect(()=>{
    if(infoRef.current) infoRef.current()
},[])
return <ChildComponent infoRef={infoRef} />

useEffect(()=>{
    infoRef.current=childFunctionToExecuteInParent
},[])