React触发react/jsx-no-bind报错该用什么替代JSX里的箭头函数？

报错本质 #

该报错来自ESLint的react/jsx-no-bind校验规则，规则设计初衷是禁止在JSX props中直接传入新生成的函数引用（比如箭头函数、bind返回的新函数、返回JSX的匿名函数等），避免每次父组件重渲染时都生成新的引用，触发子组件不必要的重渲染。你当前贴出的modalBottom函数本身没有在props里写箭头函数，触发报错的原因大概率是你在JSX中直接调用{modalBottom()}，或是将modalBottom作为prop传递给了其他组件。

解决方案 #

无需额外下载任何依赖，可根据你的业务场景选择对应方案：

• 方案1：直接内联组件逻辑
  删掉modalBottom这层函数封装，把<ConfirmAddModalBottom />组件直接写到你之前调用modalBottom()的位置即可，示例：

  {/* 原代码中写{modalBottom()}的位置直接替换为以下内容 */}
  <ConfirmAddModalBottom
    price={price}
    currencies={currencies}
    parsedAmounts={parsedAmounts}
    noLiquidity={noLiquidity}
    onAdd={onAdd}
    poolTokenPercentage={poolTokenPercentage}
  />
  

• 方案2：将modalBottom改造为标准React组件
  把返回JSX的函数改写为接收props的独立组件，调用时使用标准组件标签写法，示例：

  // 定义独立组件
  const ModalBottom = ({
    price, 
    currencies, 
    parsedAmounts, 
    noLiquidity, 
    onAdd, 
    poolTokenPercentage
  }) => {
    return (
      <ConfirmAddModalBottom
        price={price}
        currencies={currencies}
        parsedAmounts={parsedAmounts}
        noLiquidity={noLiquidity}
        onAdd={onAdd}
        poolTokenPercentage={poolTokenPercentage}
      />
    )
  }
  
  // 调用位置用组件标签写法
  <ModalBottom 
    price={price}
    currencies={currencies}
    parsedAmounts={parsedAmounts}
    noLiquidity={noLiquidity}
    onAdd={onAdd}
    poolTokenPercentage={poolTokenPercentage}
  />
  

• 方案3：禁用对应校验规则
  如果你确认当前写法不会导致性能问题，可以选择关闭该校验：
  1. 单文件单行忽略：在触发报错的代码行上方添加注释// eslint-disable-next-line react/jsx-no-bind
  2. 全局关闭：在项目的ESLint配置文件中添加规则"react/jsx-no-bind": "off"

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