React子函数组件独立函数调用props回调报no-unused-expressions错如何解决

你遇到的这个ESLint报错是因为你没有真正调用父组件传入的回调函数：代码里的props.parentCallback;只是引用了函数对象本身，没有执行调用操作，属于没有产生实际作用的无效表达式，因此触发了no-unused-expressions规则校验。

• 第一步：修正parentHandler内的函数调用写法，给函数加上括号触发执行：

function parentHandler (props) {
  // 加()执行回调函数，有需要传的参数可以直接写在括号内
  props.parentCallback();
}

• 第二步（可选优化）：可以把parentHandler直接定义在Counters组件内部，避免每次调用都额外传递props参数，代码更简洁：

// 优化后的子组件 Counters.jsx
function Counters (props) {
  const parentHandler = () => {
    props.parentCallback();
  }
  return (
    <div>
      <button onClick={parentHandler}>CALL PARENT</button>
      <hr/>
    </div>
  );
};

原来直接写onClick={props.parentCallback}能正常执行，是因为React的事件触发时会自动调用你传给onClick的函数对象，相当于React帮你加了括号执行；而你自己封装函数的时候需要主动调用传入的回调函数才能触发执行。
你现有的父组件App.js逻辑完全正常，不需要额外修改。

内容的提问来源于stack exchange，提问作者Tanvir