前端 - 我们知道子组件调用父组件的方法，可以使用props传值给子组件，请问除了此方式还有其他的方式吗？

Question

我们知道子组件调用父组件的方法，可以使用props传值给子组件，请问除了此方式还有其他的更加简单的方式吗？
请问是否可以给一个示例呢？

如果能使用zustand来进行实现就更加好。

Answer 1

使用Zustand可以避免直接通过props传递回调函数，通过全局状态管理来实现跨组件的方法调用。这种方式简化了组件间的通信，尤其是在复杂的组件树中，以下是代码示例：

创建一个简单的store

// store.jsimport create from 'zustand';const useStore = create(set => ({  count: 0,  increment: () => set(state => ({ count: state.count + 1 })),  decrement: () => set(state => ({ count: state.count - 1 }))}));export default useStore;

父组件中

// ParentComponent.jsimport React from 'react';import useStore from './store';import ChildComponent from './ChildComponent';function ParentComponent() {  const count = useStore(state => state.count);  const increment = useStore(state => state.increment);  return (    <div>      <h1>Count: {count}</h1>      <button onClick={increment}>Increment in Parent</button>      <ChildComponent />    </div>  );}export default ParentComponent;

子组件中

// ChildComponent.jsimport React from 'react';import useStore from './store';function ChildComponent() {  const decrement = useStore(state => state.decrement);  return (    <div>      <button onClick={decrement}>Decrement in Child</button>    </div>  );}export default ChildComponent;