React如何将组件props设置为动态值并解决传值不生效问题

写法不生效的核心是传值类型错误：isDisabled属性预期接收布尔类型值，你的几种写法传入的全是函数对象，根本没有拿到函数执行后的布尔返回值：

• isDisabled={myfunction}：传入的是myfunction函数的引用，不是执行后的返回结果
• isDisabled={()=>myfunction()}等箭头函数写法：传入的是新定义的箭头函数本身，本质还是函数类型，组件内部会将函数判定为真值，和你预期返回false的逻辑完全相悖。
  另外提前把固定JSX存入数组的写法很容易捕获过时闭包，就算传对了返回值，后续状态更新时也可能出现值不刷新的问题。

无动态依赖的简单场景 #

如果myfunction不需要接收遍历参数、不依赖可变的响应式状态，传prop时直接执行函数取返回值即可：

// 函数名后加()代表执行，拿到布尔结果再传入
const myArray = [
  <Component isDisabled={myfunction()} />,
  <Component isDisabled={myfunction()} />
]

// 遍历渲染时记得给元素加唯一key
myArray.map((comp, index) => <React.Fragment key={index}>{comp}</React.Fragment>)

对应判断函数正常写逻辑即可：

function myfunction() {
  // 内部实现自定义判断逻辑，最终返回布尔值
  return false
}

需动态计算的场景（React推荐写法） #

如果需要根据遍历项、索引或者组件实时状态判断禁用状态，不要提前存储JSX数组，把组件生成逻辑放到map渲染阶段执行，彻底规避闭包过时问题：

// 基于业务原始数据遍历，不要提前写死JSX
const sourceList = [/* 你的业务数据 */]
sourceList.map((item, index) => {
  // 可自由传入参数，拿到实时计算的结果
  const disabledStatus = myfunction(item, index)
  // 渲染阶段动态生成组件，传入计算好的布尔值
  return <Component key={item.id || index} isDisabled={disabledStatus} />
})

提示：列表渲染必须配置唯一key属性，否则会出现React渲染diff异常、组件状态错乱的问题。

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