我有反应组件:
function FavoritesListItem({ merchant, config, isFavorited }) {
const {
name, id, logoUrls = {}, offersCount, rebate, showRebate,
} = merchant;
const { rebateOptions } = config;
return (
const renderActiveMerchant = () => (
<div
className="mn_favoriteMerchant"
data-merchant-id={id}
data-merchant-name={name}
role="listitem"
data-test="favorite-merchant"
>
<div className="mn_favoriteMerchantInner">
<MerchantExperienceLink
className="mn_favoriteMerchantLink"
merchant={merchant}
title={`Opens merchant detail page at ${name}`}
>
<FavoriteIcon
merchantId={id}
merchantName={name}
labelUnfavorite={`Remove ${name} from Favorites list`}
showSpinner={!isFavorited}
/>
<div className="mn_logo"><img data-test="favorited-merchant-logo" src={logoUrls._120x60} alt={name} /></div>
<p className="mn_offersCount" data-test="favorited-merchant-offers-count">{offersCount} offers available </p>
</MerchantExperienceLink>
{rebate && (
<MerchantClickUrlLink className="mn_favoriteMerchantRebateLink" merchant={merchant}>
<div className="mn_rebate">
{showRebate
? <MerchantRebate {...rebate} {...rebateOptions} />
: <MerchantNoRebateLabel />}
? <MerchantRebate {...rebate} {...rebateOptions} />
: <MerchantNoRebateLabel />}
</div>
</MerchantClickUrlLink>
)}
</div>
</div>
);
const renderDeactivatedMerchant = () => (
<div
className="mn_favoriteMerchant"
data-merchant-id={id}
data-merchant-name={name}
role="listitem"
data-test="favorite-merchant"
>
<div className="mn_favoriteMerchantInner">
<MerchantExperienceLink
className="mn_favoriteMerchantLink"
merchant={merchant}
title={`Opens merchant detail page at ${name}`}
>
<FavoriteIcon
merchantId={id}
merchantName={name}
labelUnfavorite={`Remove ${name} from Favorites list`}
showSpinner={!isFavorited}
/>
<div className="mn_logo mn_noRebateMerchantLogo">
<img data-test="favorited-merchant-logo" src={logoUrls._120x60} alt={name} />
</div>
{rebate && (
<div className="mn_rebate mn_deactivatedRebate">
{
showRebate
? <MerchantNoRebateLabel />
: <MerchantRebate {...rebate} />
}
</div>
)}
</MerchantExperienceLink>
</div>
</div>
);
return (
merchant.type === 'Deactivated Merchant' ? renderDeactivatedMerchant() : renderActiveMerchant()
);
}
const mapStateToProps = () => {
const selectFavoriteByMerchantId = makeSelectFavoriteByMerchantId();
return (state, { merchant }) => ({
isFavorited: selectFavoriteByMerchantId(state, merchant.id),
});
};
export default connect(mapStateToProps)(FavoritesListItem);
并且需要将其重构为 2 个单独的组件,它们将仅呈现 renderDeactivatedMerchant 和 renderActiveMerchant。所有其他逻辑都应该在这个组件中FavoritesListItem
所以我以这种方式创建了组件:
export class FavoritesListItemDeactivatedMerchant extends Component ({ merchant, config, isFavorited }) {
render() {
const { merchant, config, isFavorited } = this.props;
const {
name, id, logoUrls = {}, rebate, showRebate,
} = merchant;
const { rebateOptions } = config;
return (
<div
className="mn_favoriteMerchant"
data-merchant-id={id}
data-merchant-name={name}
role="listitem"
data-test="favorite-merchant"
>
<div className="mn_favoriteMerchantInner">
<MerchantExperienceLink
className="mn_favoriteMerchantLink"
merchant={merchant}
title={`Opens merchant detail page at ${name}`}
>
<FavoriteIcon
merchantId={id}
merchantName={name}
labelUnfavorite={`Remove ${name} from Favorites list`}
showSpinner={!isFavorited}
/>
<div className="mn_logo mn_noRebateMerchantLogo">
<img data-test="favorited-merchant-logo" src={logoUrls._120x60} alt={name} />
</div>
{rebate && (
<div className="mn_rebate mn_deactivatedRebate">
{
showRebate
? <MerchantNoRebateLabel />
: <MerchantRebate {...rebate} />
}
</div>
)}
</MerchantExperienceLink>
</div>
</div>
);
}
}
const mapStateToProps = () => {
const selectFavoriteByMerchantId = makeSelectFavoriteByMerchantId();
return (state, { merchant }) => ({
isFavorited: selectFavoriteByMerchantId(state, merchant.id),
});
};
export default connect(mapStateToProps)(FavoritesListItemDeactivatedMerchant);
项目构建没有错误,控制台也没有错误。但它不会在浏览器中呈现此组件。我做错了什么?请帮忙。
答案 0 :(得分:0)
您混淆了函数组件和类组件的语法,并创建了一个将两者结合在一起的奇怪混搭:
export class FavoritesListItemDeactivatedMerchant extends Component ({ merchant, config, isFavorited }) {
那些道具在课堂上毫无意义!我想你是想写这个:
export const FavoritesListItemDeactivatedMerchant = ({ merchant, config, isFavorited }) => {
或
export function FavoritesListItemDeactivatedMerchant({ merchant, config, isFavorited }) {
就我个人而言,我认为您可以通过共享 RenderMerchant
和 prop isDeactivated
来改进此代码,而不是为活动和停用使用单独的组件。两种情况之间有很多重复的代码,您要避免。