props对于函数组件访问React中的params仍然有效吗

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中，可以通过this.props.name和this.props.address访问name和address。

将Event转换为功能组件后，如何访问name和address？它可以是props.name和props.address吗？

Answer 1

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

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

你也可以做解构主义更容易使用：

function Event({name, address}) {
}

Answer 2

是的，您可以通过以下方式访问它：

function Event(props) {
//
}

Answer 3

实际上，在function component中不需要使用this，您可以直接访问以下道具：

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

但我建议您使用箭头函数和函数组件的析构函数赋值，如下所示：

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