除了这个之外，还有更好的方法可以从 React 中的 parent 组件调用 child 函数吗？

Question

我试图从 React 中的 parent 组件调用 child 组件中的函数，但没有使用 refs，我成功了，但我不知道我的方法是否正确除了便宜的黑客之外的东西。有什么更好的方法可以做到这一点？

我也在阅读文档，但我可能错过了正确的方法。感谢任何资源建议和想法。

我的parent代码：

function Parent(props){ 
  const [submitClicked, setSubmitClicked] = useState(false);
  function onSubmitClick(e){
    e.preventDefault();
    setSubmitClicked(true);
  }

  return (
    <Child 
      submitClicked={submitClicked}
      setSubmitClicked={setSubmitClicked}
    />
  );
}

Child代码：

function Child(props) {
  useEffect(()=>{
    if(props.submitClicked){

      //do something in the child component...

      props.setSubmitClicked(false);
    }
  });
}

Answer 1

将处理状态更新的处理程序（函数）从父组件传递到子组件。

const { useState } = React;

// Child receives the handler
// When the button is clicked call the handler
function Child({ handleSubmit }) {
  return <button onClick={handleSubmit}>Click me</button>
}

function Parent() {

  const [ submitClicked, setSubmitClicked ] = useState(0);

  // The handler deals with the state update
  function handleSubmit() {
    setSubmitClicked(submitClicked + 1);
  }

  return (
    <div>
      <p>{submitClicked}</p>
      <Child handleSubmit={handleSubmit} />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

除了这个之外，还有更好的方法可以从 React 中的 parent 组件调用 child 函数吗？

Is there a better way to call a child function from a parent component in React, other than this?

javascript

web-frontend

reactjs