React应用中props定义位置及待办列表代码报错咨询

嘿，这个问题其实很好理解～在React里，组件的props得作为组件函数的参数来接收，这样咱们在组件内部才能顺顺当当访问到它！

举个简单的例子，普通函数组件的写法：

function MyComponent(props) {
  // 这里就能直接用props里的内容啦，比如props.title
  return <h1>{props.title}</h1>;
}

要是觉得每次写props.xxx麻烦，还可以用解构赋值来简化：

function MyComponent({ title, desc }) {
  // 直接用title和desc就行，不用加props前缀
  return <div><h1>{title}</h1><p>{desc}</p></div>;
}

哦对了，当你在父组件里用这个组件的时候，是通过<MyComponent title="Hello" desc="这是个示例" />来传递props的，但要在组件内部拿到这些值，必须先在组件函数的参数里把它们接收进来才行哦！

先看你的报错信息：Failed to compile. ./src/components/Form.js Line 8: 'props' is not defined no-undef，这个错误其实非常明确——你在handleSubmit函数里用了props，但这个函数根本找不到props的定义呀！

为啥会这样？因为你把handleSubmit定义在Form组件的外面了，它不在组件的作用域里，自然拿不到组件的props参数。React组件的props只有在组件函数的内部作用域里才能直接访问，外面的函数没拿到这个“通行证”，肯定会报错啦。

给你两种靠谱的修复方案：

方案1：把handleSubmit移到Form组件内部 #

这是最常用也最清晰的写法，把相关的函数放在组件内部，它就能直接访问到组件的props了：

function Form(props){
  // 把handleSubmit挪到组件内部，瞬间就能拿到props啦
  function handleSubmit(e){
    e.preventDefault();
    props.addTask("Say hello!");
  }

  return(
    <form onSubmit={handleSubmit}>
      <h2 className="label-wrapper">
        <label htmlFor="new-todo-input" className="label__lg">
          What needs to be done?
        </label>
      </h2>
      {/* 这里补上你原来的其他表单元素就行 */}
    </form>
  )
}

方案2：给handleSubmit手动传递props参数 #

要是你不想把函数移到组件内部，也可以在调用的时候把props传进去，不过得稍微调整一下onSubmit的写法：

function handleSubmit(e, props){
  e.preventDefault();
  props.addTask("Say hello!");
}

function Form(props){
  return(
    // 用箭头函数把props作为参数传给handleSubmit
    <form onSubmit={(e) => handleSubmit(e, props)}>
      <h2 className="label-wrapper">
        <label htmlFor="new-todo-input" className="label__lg">
          What needs to be done?
        </label>
      </h2>
      {/* 其他表单元素 */}
    </form>
  )
}

一般更推荐第一种方案，因为这样代码的作用域更清晰，也更符合React组件的写法习惯哦。

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