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

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

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

var {a:aa} = {a: 3};

console.log(aa);

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