Functional React：从导入组件中调用函数[重复]

Question

我想从父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 (
    (...)
  );
}

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

Answer 1

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>
}

但在您的例子中,组件似乎没有层次关系。要以解耦的方式共享状态，您应该使用上下文API