Question

我对JS中的对象解构有疑问。在下面的代码中，我假设组件布局已经分配了值布局（使用小写）。但是布局的值未定义且正在使用布局。

const MustBeAuthenticated = ({ layout: Layout, ...rest }) => {
  if (!isAuthenticated()) {
    return redirectToLogin({...rest})
  }
  return (
    <Layout {...rest} />
  )
}

我尝试使用({ Layout, ...rest })提取组件，但我再次抛出一个未定义的错误。如果我误解了某些内容，我只想澄清一下。

Answer 1

function logmsg({logMessage: LogMessage, ...rest}) {
    console.log(LogMessage); // prints 'hi'
    console.log(rest); // prints {bye: 'bye'}
}

logmsg({logMessage: 'hi', bye: 'bye'});

这是正常的。

Answer 2

我认为您将要使用React API中的cloneElement。您将布局存储在变量中，如果要返回它，则需要使用它，而不是布局组件。

这样的事情：

const MustBeAuthenticated = ({layout, ...rest}) => {
  if (!isAuthenticated()) {
    return redirectToLogin({...rest})
  }
  return (
    React.cloneElement(
      layout,
      rest,
    )
  )
}

那会给你这样的东西

<element.type {...element.props} {...props}>{children}</element.type>

Answer 3

::class内部对象解构将值赋给新的变量名称。

＆＃13;

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variables_names_and_providing_default_values

使用React组件进行ES6对象解构澄清

3 个答案: