如何動態渲染圖示？

如何僅動態渲染圖示cartIcon？因為現在就像下面的代碼，當我用滑鼠進入組件時，所有的圖示都出現了，不僅僅是單品的圖示。

我認為是因為地圖，但我怎么能只渲染它呢？

interface IItemsProps {
  products: ProductsType;
}

const Items: React.FunctionComponent<IItemsProps> = ({ products }) => {
  const [state, setState] = React.useState<boolean>(false);

  const handleMouseEnter = () => {
    setState(true);
  };

  const handleMouseLeave = () => {
    setState(false);
  };

  const itemUI = products.map((item: SingleProductsType) => {
    const { name, price, _id } = item;

    return (
      <WrapperSingleItem key={uuidv4()} id={_id}>
        {state && <IconsCarts />} ** //HERE I NEED TO SHOW THIS COMPONENT ONLY WHEN I 
                                   // ENTER WITH THE MOUSE BUT ONLY FOR THE SELECTED 
                                    //PRODUCT NOT ALL OF THEM **
        <ImgProduct
          src={mouse}
          alt={name}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
        <WrapperTextProduct>
          <TextName>{name}</TextName>
          <div>
            <TextActualPrice>$ {price}</TextActualPrice>
            <TextPreviousPrice>
              $ {Math.trunc((price * 20) / 100   price)}.00
            </TextPreviousPrice>
          </div>
        </WrapperTextProduct>
      </WrapperSingleItem>
    );
  });

  return <WrapperItems>{itemUI}</WrapperItems>;
};

export default Items;

uj5u.com熱心網友回復：

您可以將懸停_id狀態存盤在狀態，以便您知道它是哪個狀態。

const [state, setState] = React.useState<string | null>(null); // or `number` ?

然后

{state === _id && <IconsCarts />}

<ImgProduct
  src={mouse}
  alt={name}
  onm ouseEnter={() => setState(_id)}
  onm ouseLeave={() => setState(null)}
/>

或者您可以將 移動useState到一個稱為地圖的每個回圈的組件中，以便每個專案都有自己的私有狀態。

function MyItem({item}: { item: SingleProductsType }) {
    const [state, setState] = React.useState<boolean>(false);

    const { name, price, _id } = item;

    return (
      <WrapperSingleItem key={uuidv4()} id={_id}>
        {state && <IconsCarts />}

        <ImgProduct
          src={mouse}
          alt={name}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
        <WrapperTextProduct>
          <TextName>{name}</TextName>
          <div>
            <TextActualPrice>$ {price}</TextActualPrice>
            <TextPreviousPrice>
              $ {Math.trunc((price * 20) / 100   price)}.00
            </TextPreviousPrice>
          </div>
        </WrapperTextProduct>
      </WrapperSingleItem>
    );
}

現在你可以這樣做：

{products.map((item: SingleProductsType) => <MyItem item={item} />}

最后，如果您只想在使用滑鼠輸入某個元素時顯示/隱藏購物車圖示，則此解決方案可能有點過頭了。您可以單獨使用 CSS 來做到這一點，這將是一個更清晰的解決方案，因為它不需要任何 javascript 代碼，而且您根本不必跟蹤狀態。

.item {
  width: 100px;
  height: 100px;
  background: #aaa;
  margin: 10px;
}

.item button {
  display: none;
}

.item:hover button {
  display: block;
}

<div class="item">
  Foo
  <button>Add to cart</button>
</div>
<div class="item">
  Bar
  <button>Add to cart</button>
</div>
<div class="item">
  Baz
  <button>Add to cart</button>
</div>

uj5u.com熱心網友回復：

狀態為布林值時，您只知道是否顯示圖示，但是知道要在哪個串列項上顯示圖示呢？代替 state 是一個布林值，我們如何使用產品的索引。

interface IItemsProps {
  products: ProductsType;
}

const Items: React.FunctionComponent<IItemsProps> = ({ products }) => {
  const [state, setState] = React.useState<number>(-1);

  const handleMouseEnter = (index) => {
    setState(index);
  };

  const handleMouseLeave = () => {
    setState(-1);
  };

  const itemUI = products.map((item: SingleProductsType, index: number) => {
    const { name, price, _id } = item;

    return (
      <WrapperSingleItem key={uuidv4()} id={_id}>
        {state === index && <IconsCarts />} ** //Check if index matches state before showing icon **
        <ImgProduct
          src={mouse}
          alt={name}
          onMouseEnter={() => handleMouseEnter(index)}
          onm ouseLeave={handleMouseLeave}
        />
        <WrapperTextProduct>
          <TextName>{name}</TextName>
          <div>
            <TextActualPrice>$ {price}</TextActualPrice>
            <TextPreviousPrice>
              $ {Math.trunc((price * 20) / 100   price)}.00
            </TextPreviousPrice>
          </div>
        </WrapperTextProduct>
      </WrapperSingleItem>
    );
  });

  return <WrapperItems>{itemUI}</WrapperItems>;
};

export default Items;

現在顯示圖示的條件是串列項的索引是否與狀態中的索引匹配。我們將索引傳遞給 handleMouseEnter 以將狀態設定為該索引，handleMouseLeave 會將其重置回 -1。

標籤：反应 打字稿 反应道具

上一篇：通用型別是型別腳本

下一篇：需要幫助來轉換打字稿助手