Question

我想从父反应组件中的导入组件中调用函数。

我的父组件：

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

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

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

Answer 2

状态通常通过道具传递给子组件

ServicePrincipalId=dbutils.secrets.get(scope="dnb-dlg2-dbrcks-scp-stg",key="SPID")
ServicePrincipalKey=dbutils.secrets.get(scope="dnb-dlg2-dbrcks-scp-stg",key="SPKey")
DirectoryID=dbutils.secrets.get(scope="dnb-dlg2-dbrcks-scp-stg",key="DirectoryID")

在内部更改传递给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} />的{{1}}道具时，组件将处理更新本地状态。

功能性React：从导入的组件中调用函数

2 个答案: