reactjs - ReactJS中的 '...props'是什么意思？

Question

... Prop 是什么意思？代码是:

export default class NavItem extends React.Component {
constructor() {
    super();
}

render() {
    const { router, index, to, children, ...props } = this.props;
    let isActive = false;

    if (router.isActive('./', true) && index) {
        isActive = true

children 我想这是实际元素的子元素，但是 ...props 它是什么意思？

谢谢。

Answer 1

在此上下文中使用的

... 称为 "the rest" parameter ，如“其余的人”

该行正在使用对象 Destructuring assignment从对象 this.props 分配新变量 router、index、to 和 children< 的语法，以及 this.props 中的其他所有内容(其余部分)到 props

const { router, index, to, children, ...props } = this.props;

这是其用法的另一个示例:

const bigBird = {height: 'tall', color: 'yellow', disposition: 'sunny'};
const {height, ...others} = bigBird;
//height == 'tall'
//others == {color: 'yellow', disposition: 'sunny'};