Javascript 如何调用嵌套子对象&x27；react js中父元素的s方法

我的结构如下：

Parent -> Some element 1 ... Some element N -> Child
                                            -> Child
                                            -> Child

比方说，我想用Parent的方法调用每个孩子的函数。这样做的方法是什么？我看到了使用ref的答案，但看起来它们只适用于直接的孩子，而不适用于嵌套的孩子

---

也许可以为子级添加一些事件跟踪器或类似的东西，并通过父级的方法调用触发它？

React是单向的，数据从父级流向子级，而不是相反。对于children自己的方法也是如此，但是对于应该从子级向上流动到父级的事件，情况并非如此。您可以通过将回调传递给子组件来利用这一点，子组件允许您按照自己的意愿与子组件进行交互

const Parent = (props) => {
    // Wrapped in a useCallback to prevent circular dependencies
    const childApi = useCallback((api) => {
        // do something in the parent with the childs exposed api
        api.updateState('Hello World');
    });

    return <Child api={childApi} />;
}

const Child = (props) => {
    const { api } = props;
    const [value, setValue] = useState(null);

    const localApi = {
        updateState: (value) => {
            setValue(value);
        }
    }

    // Use effect to ensure that the callback only re-renders this component
    // when it actually does change and in conjunction with useCallback in the
    // parent avoids cyclic dependencies / infinite re-renders
    useEffect(() => {
        // Call the parents callback with the childs API as a parameter
        api(localApi);
    }, [api]);

    return <p>{value}</p>;
}

const Parent=（道具）=>{
//包装在useCallback中以防止循环依赖
const childApi=useCallback（（api）=>{
//在父级中使用孩子的公开api执行某些操作
api.UpdateEstate（“你好世界”）；
});
返回；
}
const Child=（道具）=>{
const{api}=props；
const[value，setValue]=useState（null）；
const localApi={
updateState:（值）=>{
设置值（值）；
}
}
//使用effect确保回调仅重新呈现此组件
//当它实际发生更改时，并与
//父级避免循环依赖/无限重渲染
useffect（（）=>{
//使用childs API作为参数调用parents回调
api（本地api）；
}[api]；
返回{value}
；
}

---

上述操作的结果通过子组件将

Hello World

呈现到浏览器中。

React设计为单向，数据从父级流向子级，而不是相反方向。对于children自己的方法也是如此，但是对于应该从子级向上流动到父级的事件，情况并非如此。您可以通过将回调传递给子组件来利用这一点，子组件允许您按照自己的意愿与子组件进行交互

const Parent = (props) => {
    // Wrapped in a useCallback to prevent circular dependencies
    const childApi = useCallback((api) => {
        // do something in the parent with the childs exposed api
        api.updateState('Hello World');
    });

    return <Child api={childApi} />;
}

const Child = (props) => {
    const { api } = props;
    const [value, setValue] = useState(null);

    const localApi = {
        updateState: (value) => {
            setValue(value);
        }
    }

    // Use effect to ensure that the callback only re-renders this component
    // when it actually does change and in conjunction with useCallback in the
    // parent avoids cyclic dependencies / infinite re-renders
    useEffect(() => {
        // Call the parents callback with the childs API as a parameter
        api(localApi);
    }, [api]);

    return <p>{value}</p>;
}

const Parent=（道具）=>{
//包装在useCallback中以防止循环依赖
const childApi=useCallback（（api）=>{
//在父级中使用孩子的公开api执行某些操作
api.UpdateEstate（“你好世界”）；
});
返回；
}
const Child=（道具）=>{
const{api}=props；
const[value，setValue]=useState（null）；
const localApi={
updateState:（值）=>{
设置值（值）；
}
}
//使用effect确保回调仅重新呈现此组件
//当它实际发生更改时，并与
//父级避免循环依赖/无限重渲染
useffect（（）=>{
//使用childs API作为参数调用parents回调
api（本地api）；
}[api]；
返回{value}
；
}

上述操作的结果通过子组件将

Hello World

呈现到浏览器中