时间戳

首页 > 解决方案 > 你能告诉我他们的代码之间是否有任何区别。如果他们是，那么背后的原因是什么？

javascript - 你能告诉我他们的代码之间是否有任何区别。如果他们是，那么背后的原因是什么？

问题描述

1.

import React from 'react'; import {Link} from 'react-router-dom';

function CardItem(props) {  return (        <>       <li className='cards__item'>
          <Link className='cards__items__link' to={props.path}>
           <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
            className='cards__items__img' 
            alt='Travel Image'
            src={props.src}             />
           </figure>
            <div className='cards__item__info'>
             <h5 className='cards__item__text'>{props.text}</h5>
            </div>   
          </Link>        </li>      </>         ); }

export default CardItem;

它输出为 ------[页面被放大并且用作卡片的图像本身太大以至于它们不会出现在页面本身上。他们以杂乱无章的方式展示自己。][1]

2.

import React from 'react'; import { Link } from 'react-router-dom';

function CardItem(props) {   return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              className='cards__item__img'
              alt='Travel Image'
              src={props.src}
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
        </Link>
      </li>
    </>   ); }

export default CardItem;

它根据需要输出在这种情况下，图像可以正确显示自己并根据需要和样式进行内联

标签： javascriptcssreactjsreact-router

解决方案

代码一有className='cards__items__img'，代码二有className='cards__item__img'。

代码一有className='cards__items__link'，代码二有className='cards__item__link'。

Items 在第一个代码上是复数，在第二个代码上是单数。原因？我不知道，但第一个代码的格式很差。

推荐阅读