props 仍然适用于 React 中访问参数的函数组件吗？

Question

我正在将类组件转换为功能组件。 Event组件以前是这样的：

class Event extends React.Component {
    //do something
  }

现在Event是一个函数组件：

function Event() {
  // do something
}

一些参数被传递给Event，如下所示：

const EventScreen = (props) => (<Event {...props} name={name} address={address})

在Event 类中，name 和address 可以通过this.props.name 和this.props.address 访问。

Event转换成函数组件后，如何访问name和address？可以是props.name和props.address吗？

Answer 1

您正在谈论使用Function component； props 作为第一个参数传递给函数：

function Event(props) {
  // props.name etc exist
}

你也可以做解构，方便使用：

function Event({name, address}) {

}

Answer 2

是的，您可以这样访问它：

function Event(props) {
  //
}

Answer 3

其实在function component中不需要使用this，可以直接访问如下props：

function Event(props) {
  console.log(props);
}

但我建议您使用arrow function 和destructuring assignment 来实现如下功能组件：

const Event = ({ name, address }) => {
  console.log(name, address);
}