无法在反应中调用子组件的方法

Question

我有以下组件。该组件接受可以调用的函数的道具。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

听起来您想要一个可以在特定实现中选择性覆盖Parent的默认道具。deleteIcon你可以通过这样的编辑来做到这Parent一点：

deleteIcon = () => {

 console.log("deleting the document");

}

export const Parent = (props) => {

  const buttonOnClickHandler = props.deleteIcon || deleteIcon;

  return (

    <button onClick={() => {buttonOnClickHandler()}}

  )

}

或者您可以使用默认参数：

deleteIconDefault = () => {

 console.log("deleting the document");

}

export const Parent = ({

  deleteIcon = deleteIconDefault

}) => {;

  return (

      <button onClick={() => {this.props.deleteIcon()}}

  )

}

希望这会为您指明正确的方向！

Answer 2

您正在调用 Parent 组件中的 deleteIcon 方法，而不是 props.deleteIcon

Answer 3

一些注意点：

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