javascript - 我怎样才能解构一个 React Prop 并仍然访问其他 Prop ？

Question

我很好奇，如果我想要所有的 props，而且还要解构一个属性，组件的参数(props)是否可以像导入一样解构。我想这更像是一个 JavaScript 问题而不是 React 问题，但是例如。

import React, {useEffect} from 'React'

我知道导入与我要求的不同，但我只是举个例子。像下面这样的可能吗？

const props = {
  test: true,
  destructure: 'yes'
}

const TestComponent = (props, {desctructure}) => {
  return <div>Not Important, but not having a return bothered me enough to add it</div>;

我很清楚我可以做到这一点:

const TestComponent = (props) => {
  const { destructure } = props;
  return <div>Another return</div>;

我认为这有用的原因:

当浏览大型和过于复杂的组件时，我觉得第一个选项会使阅读 Prop 更容易，因为它会突出这些值来自 Prop 。当然，prop 值可以写成 props.destructure，但如果有很多引用，这几乎感觉像太多的样板。

很长一段时间以来我一直在想这个问题，我真的只是想确保我没有遗漏一些简单的东西。我非常适合做后者，我不想为此寻找一些自定义实现。

Answer 1

导入示例是一个非常不同的情况。导出分为默认导出和命名导出，它们可以并排完成。

既然您想将大部分 Prop 保留在 props 对象中，但在其外部使用一些 Prop ，您可以做的是使用对象剩余运算符将其余 Prop 分散到一个对象中(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax ):

const TestComponent = ({destructure, ...props}) => {
  return <div>Another return</div>;
}

const TestComponent = ({destructure, ...props}) => {
  console.log(destructure,props);
  return <div>Another return
  <br/>
  destructure: {JSON.stringify(destructure)}
  <br/>
  props: {JSON.stringify(props)}
  </div>;
}

ReactDOM.render(<TestComponent test destructure="yes" />,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>