Reactjs 是否有可能在ES6 React组件的构造函数签名中安全地解构该组件类?

Reactjs 是否有可能在ES6 React组件的构造函数签名中安全地解构该组件类?,reactjs,ecmascript-6,es6-class,Reactjs,Ecmascript 6,Es6 Class,我有一个ES6类,它扩展了React.Component,即React组件。假设我的组件如下所示: class MyComponent extends React.Component { constructor({ foo, bar, baz, ...props }) { super({ foo, bar, baz, ...props }); this.state = { foo, bar, baz }; } render() { return <s

我有一个ES6类,它扩展了
React.Component
,即React组件。假设我的组件如下所示:

class MyComponent extends React.Component {
  constructor({ foo, bar, baz, ...props }) {
    super({ foo, bar, baz, ...props });
    this.state = { foo, bar, baz };
  }

  render() {
     return <span>Foo: {this.state.foo} Bar: {this.state.bar} Baz: {this.state.baz}</span>
  }
}
类MyComponent扩展了React.Component{ 构造函数({foo,bar,baz,…props}){ 超级({foo,bar,baz,…props}); this.state={foo,bar,baz}; } render(){ 返回Foo:{this.state.Foo}Bar:{this.state.Bar}Baz:{this.state.Baz} } } 在这里,我在构造函数的签名中使用了解构,以提取出我希望在组件状态中使用的一些道具。我确保我将这些值传递给super。但是,当我实际执行类似的代码时,我会看到如下警告:

class MyComponent extends React.Component {
  constructor({ foo, bar, baz, ...props }) {
    super({ foo, bar, baz, ...props });
    this.state = { foo, bar, baz };
  }

  render() {
     return <span>Foo: {this.state.foo} Bar: {this.state.bar} Baz: {this.state.baz}</span>
  }
}
警告:MyComponent(…):在
MyComponent
中调用super()时,请使 一定要放弃组件构造函数使用的相同道具 通过了

所以我的问题是,是否有可能像我所展示的那样在没有相关警告的情况下对构造函数的签名进行解构?(我假设警告是有充分理由的,我也同样确信我不完全理解其含义。)

,你会看到它做了一个粗略的检查,看看道具对象是否匹配

// other stuff

var propsMutated = inst.props !== publicProps;

// other stuff

warning(
  inst.props === undefined || !propsMutated,
  '%s(...): When calling super() in `%s`, make sure to pass ' +
  'up the same props that your component\'s constructor was passed.',
  componentName, componentName
);

当您将道具传递到super时,您创建了一个道具克隆,因此它会发出警告。

很确定这是因为在函数中必须首先调用
super
,但是如果您使用babel进行传输,为了使用解构,它必须在超级调用之前执行
const foo=props.foo
等操作。你可以做的是
super(props)
,然后
const{foo,bar,baz}=props
,在super调用之后。当然我意识到我可以这样做,但这不是我要求的。我上面给出的示例代码实际上为我正确绑定了值,但我担心的是,如果相同的道具没有通过super渗透进来,那么会出现警告。警告还可能是您正在构建传入的对象的克隆。我认为这个警告是针对原始道具的浅层平等性检查(因为深层的道具太贵了),所以当你在传递正确的东西时,你仍然会收到警告。我很确定你所做的一切都很好,但我之所以写这篇评论,是因为我懒得去查看github上的
React
源代码:pThank you@AR7,这对我来说很有意义。如果你想把它打印出来,我很乐意接受这个答案。