未在函数参数中声明props时，如何在React组件中使用props？

一、为什么能在此处调用props？ #

要分两种组件类型来看：

1. 类组件情况
   如果你的ToDoForm是类组件，类组件的实例本身自带props属性，正确写法是用this.props.onSubmit。如果代码里没写this还能运行，大概率是全局作用域里意外定义了props变量（这属于bug，正常严格模式下会直接报错），并非React的正常机制。

类组件正确写法示例：

class ToDoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onSubmit({id:Math.floor(Math.random() * 10000)})
  }
  render() {
    return <form onSubmit={this.handleSubmit}>...</form>
  }
}

2. 函数组件情况
   如果是函数组件，直接写props.onSubmit本身是错误的，会抛出ReferenceError: props is not defined。除非代码外层作用域里刚好有个叫props的变量（比如父组件不小心把props暴露到全局），但这完全不符合规范，属于代码失误。

二、未在参数中指定时，正确使用props的方式 #

函数组件 #

函数组件必须在参数里声明props才能使用，有两种常用写法：

• 直接接收完整props对象：

function ToDoForm(props) {
  const handleSubmit = (e) => {
    e.preventDefault();
    props.onSubmit({id:Math.floor(Math.random() * 10000)})
  }
  return <form onSubmit={handleSubmit}>...</form>
}

• 解构提取需要的属性（更简洁）：

function ToDoForm({ onSubmit }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({id:Math.floor(Math.random() * 10000)})
  }
  return <form onSubmit={handleSubmit}>...</form>
}

箭头函数组件的写法和上面一致，仅函数定义方式不同。

类组件 #

类组件不需要在方法参数里声明props，直接通过this.props访问即可。如果在构造函数里要用到props，必须把它传给父类的构造函数：

class ToDoForm extends React.Component {
  constructor(props) {
    super(props); // 必须传props给super，否则构造函数内this.props为undefined
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onSubmit({id:Math.floor(Math.random() * 10000)})
  }
  render() {
    return <form onSubmit={this.handleSubmit}>...</form>
  }
}

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