Functional React：从导入的组件中调用函数

9 浏览
0 Comments

Functional React：从导入的组件中调用函数

这个问题已经有答案了：

从父组件调用子组件的方法

我想在我的父组件中调用导入组件中的一个函数。

我的父组件：

import Customer from './Customer';  
function App() {
  return (
      
        
          
            
          
        
      
      
  );
}

我的子组件 (customer)：

function Customer() {
  const [showAllCustomers, setshowAllCustomers] = useState(false);
  function showCustomers() {
    setshowAllCustomers(true);
  }
  return (
    (...)
  );
}

在函数式 react 中，如何从另一个组件中调用函数？

或者如何从另一个组件中改变状态 (如果这是更好的方法)？

所有的教程都只是关于面向对象的 react 组件，不幸的是。

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

状态通常通过props传递给子组件

function Child (props) {
  // Set the default state
  const [showAllCustomers, setshowAllCustomers] =  useState(props.showAllCustomers);
  useEffect(() => {
    // Set the new state when props change
    setshowAllCustomers(props.showAllCustomers);
  }, [props.showAllCustomers]);
  return (
    (...)
  );
}
...

当传递给的showAllCustomers属性在组件内部被改变时，组件将处理更新本地状态。

0
0 Comments

React具有单向、自顶向下的数据流。这意味着横向通信被认为是反模式。如果您想更改父级的状态，则应将处理程序传递给子组件，以在运行时执行。

const Parent = () =>{
    const [foo, setFoo] = useState('foo')
    return 
}
const Child = ({ handler }) => {
    const onClick = () =>{
        handler('baz')
    }
    return 
}

但在您的情况下，似乎组件没有层级关系。为了以分离的方式共享状态，您应该使用Context API。

0