我很好奇,如果我想要所有的 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,但如果有很多引用,这几乎感觉像太多的样板。
很长一段时间以来我一直在想这个问题,我真的只是想确保我没有遗漏一些简单的东西。我非常适合做后者,我不想为此寻找一些自定义实现。
最佳答案
导入示例是一个非常不同的情况。导出分为默认导出和命名导出,它们可以并排完成。
既然您想将大部分 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"/>
关于javascript - 我怎样才能解构一个 React Prop 并仍然访问其他 Prop ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64547597/