Question

下面两个组件是否相同？目的是我试图做一个包装来定制组件。

const myComponent = (props) => {
    return (
        <OtherComponent {...props} />
    )
}

和

class myComponent extends Component {
    const { ...rest } = this.props
    render() {
        return <OtherComponent {...rest} />
    }
}

{...props}

与

相同

const { ...rest } = this.props ？

Answer 1

是的，两种编写方式都相同。 this.props中的每个键/值对都将以rest变量结尾。

您可以直接使用const { ...rest } = this.props来代替编写this.props。

const MyComponent1 = (props) => {
  return (
    <OtherComponent {...props} />
  )
}

class MyComponent2 extends Component {
  render() {
    return <OtherComponent {...this.props} />
  }
}

Answer 2

是的，它们是相同的。首先，{...props}是使用散布运算符复制props对象并将其传递给其他组件的。在const {...rest} = this.props的情况下，将散布运算符与解构分配一起使用。解构语法允许将对象或数组提取或解压缩为一堆变量。

代码：

let obj={a:"1",b:"2",c:"3"}
let {a,...rest}=obj
console.log(a)
console.log(rest)

输出：

1
{b:"2",c:"3"}

这里，a是从obj提取的，并分配给名为a的变量，而对象的其余部分则分配给名为rest的变量。

因此，这意味着执行const {..rest} = this.props并将其传递给其他组件的结果与执行{...props}相同。

Answer 3

react中有两种类型的组件

无状态组件或功能组件

const myComponent = (props) => { return ( <OtherComponent {...props} /> ) }

该组件的任务是仅渲染纯jsx！

状态组件或类组件

`

class myComponent extends Component {
    const { ...rest } = this.props
    render() {
        return <OtherComponent {...rest} />
    }
}

`

Class组件提供更多功能，而更多功能带来更多行李。选择类组件而不是功能组件的主要原因是它们可以具有状态和生命周期挂钩，例如componentWillMount（），componentDidUpdate（）

因此，可以得出结论，如果我们要渲染一个正在从其父级接收道具的组件并且在其状态下不进行任何操作，那么我们可以使用功能组件

关于第二个问题

{...props}与const { ...rest } = this.props

是的，完全一样！

希望这会有所帮助！

通过类和无状态组件传递所有道具

3 个答案: