[英]Destructing an object and using it - React prop
I have a React component that receives a prop, 2 values should be destructed from the prop and the prop itself should be passed further, I tried the following but am receiving a Line 23:3: Duplicate key 'countryData' no-dupe-keys
warning.我有一个接收 prop 的 React 组件,应该从 prop 中破坏 2 个值,并且应该进一步传递 prop 本身,我尝试了以下但收到Line 23:3: Duplicate key 'countryData' no-dupe-keys
警告。
const IndividualCountryContainer = ({
countryData: {
name: { common },
flags: { png },
},
countryData
}) => (
<div className='country'>
<img className='country-flag' src={png} alt={`${common}'s flag`} />
<IndividualCountryData countryData={countryData} />
</div>
);
So, how do I solve this?那么,我该如何解决呢?
Destructure your prop inside your function definition, like:在您的 function 定义中解构您的道具,例如:
const IndividualCountryContainer = ({ countryData }) => {
const {
name: { common },
flags: { png },
} = countryData;
return (
<div className="country">
<img className="country-flag" src={png} alt={`${common}'s flag`} />
<IndividualCountryData countryData={countryData} />
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.