功能反应：从导入的组件调用函数[重复]

Posted 2023-02-21

【中文标题】功能反应：从导入的组件调用函数[重复]

【英文标题】：Functional React: call function from imported component [duplicate]

【发布时间】：2020-04-04 15:29:35

【问题描述】：

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

我的父组件：

import Customer from './Customer';  

function App() 

  return (
    <div className="App">
      <Container maxWidth="sm">
        <Grid container spacing=2>
          <Grid item xs=6>
            <Button onClick=Customer.showCustomers>show customers</Button>
          </Grid>
        </Grid>
      </Container>
      <Customers />
    </div>
  );

我的子组件（客户）：

function Customer() 
  const [showAllCustomers, setshowAllCustomers] = useState(false);

  function showCustomers() 
    setshowAllCustomers(true);
  
  return (
    (...)
  );

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

或者我如何从另一个组件更改状态（如果那是更好的方法）

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

【参考方案1】：

状态一般通过 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 (
    (...)
  );

...
<Customer showAllCustomers=someVariable />

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

【参考方案2】：

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

const Parent = () =>
    const [foo, setFoo] = useState('foo')

    return <Child handler=setFoo />


const Child = ( handler ) => 
    const onClick = () =>
        handler('baz')
    

    return <button onClick=onClick> Change Parent</button>

但在您的情况下，组件似乎没有层次关系。要以解耦的方式共享状态，您应该使用Context API