javascript - 无法在react中调用子组件的方法

Question

我有以下组件。

该组件接受 props，这是可以调用的函数。

deleteIcon = () => {
 console.log("deleting the document");
}

    export const Parent = (props) => {

      return (
         <button onclick={() => {deleteIcon()}}
      )

    }

现在，我有另一个使用该组件的组件。它有自己的 deleteIcon 方法的实现。

deletechildIcon = () => {

}

export const child = () => {
     return (
   <Parent deleteIcon={() => {deletechildIcon()}} />
 )
}

因此，从子级开始，它仍然调用父级方法，而不是子级方法。谁能帮我解决这个问题吗？

Answer 1

一些注意点:

• onClick 而不是 onclick
• 不需要在 props 中使用箭头函数，这可能会导致性能损失，这不是最佳实践
• 在组件内编写您的函数
• Child 组件是在 Parent 内部调用的组件，您将其设置为相反的

<小时/>

尝试文本中的演示:

const Parent = () => {
  const deleteIcon = () => {
    console.log("deleting the document");
  };
  return <Child deleteIcon={deleteIcon} />;
};

const Child = props => {
  return <button onClick={props.deleteIcon}>XXX</button>;
};

ReactDOM.render(<Parent />, document.getElementById("root"));

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