React JS报错props children is not defined如何排查解决

核心报错原因 #

• 函数组件未声明接收props入参，直接在组件内部调用props.children，此时作用域内根本不存在props变量
• 对props做解构赋值时没有提取children字段，却直接在JSX里使用单独的children变量，触发未定义报错
• 存在低级拼写错误：比如漏写props.前缀直接调用children，或是把children错写为childs/childrens等错误名称

对应修复方案 #

根据你平时的代码书写习惯选对应方案即可：

• 如果你习惯直接通过props对象访问属性，记得给组件显式加上props入参：

// 错误写法
const CardWrapper = () => {
  return <div className="card">{props.children}</div> // 触发props未定义报错
}

// 修复后写法
const CardWrapper = (props) => {
  return <div className="card">{props.children}</div>
}

• 如果你习惯先解构props再使用属性，记得把children加入解构的字段列表：

// 错误写法
const CardWrapper = ({ cardTitle }) => {
  return <div className="card">
    <h4>{cardTitle}</h4>
    {children} {/* 触发children未定义报错 */}
  </div>
}

// 修复后写法
const CardWrapper = ({ cardTitle, children }) => {
  return <div className="card">
    <h4>{cardTitle}</h4>
    {children}
  </div>
}

快速排查技巧：顺着控制台的报错栈定位到触发报错的具体代码行，检查当前行用到的props/children变量有没有在当前组件作用域内声明、有没有拼写错误，这类is not defined报错90%以上都是变量漏声明、拼写错误、漏传参数导致的，不需要往复杂的React原理方向绕弯排查。

内容的提问来源于stack exchange，提问作者Tom-Cat