Блог

Главная - Вопросы по программированию - проверка реквизитов реакции на машинопись не работает

проверка реквизитов реакции на машинопись не работает

#typescript #react-typescript

Вопрос:

Я новичок в машинописи и, похоже, не могу разобраться в этой проблеме. Я создал интерфейс и проверил реквизиты. он работает, если реквизит пуст, но я ожидаю строку, и если передается число, это не дает никаких ошибок.

 type Props = {
  name: number;
};

const ProductListItem = ({ name }: Props): JSX.Element => {
  return (
    <div className="product">
      <h4>{name}</h4>
    </div>
  );
};

export default ProductListItem;

Используя компонент здесь, как это

     import "./ProductList.scss";
import ProductListItem from "./ProductListItem";

interface Product {
  _id: string;
  itemName: string;
}
type Props = {
  allProducts: Array<Product>;
};

const ProductList = ({ allProducts }: Props): JSX.Element => {
  console.log(allProducts);
  const productsTodisplay = allProducts.map((product: any) => (
    <ProductListItem key={product._id} title={product.itemName} />
  ));
  return <section className="productsContainer">{productsTodisplay}</section>;
};

export default ProductList;

Комментарии:

1. Не могли бы вы указать, куда вы импортируете свой ProductListItem ? и как вы тестируете типы опор?

2. Я не проверяю проптипы, я думал, что если я задам тип в интерфейсе и передам какое-то другое значение, это вызовет ошибку?

3. Попробуйте мой ответ, если он выдает ошибки. Так и должно быть, если вы не даете никаких реквизитов или неправильных типов реквизита.

4. В каком редакторе кода вы это пробуете?

Ответ №1:

Для правильной регистрации типа React Functional Component вы можете добавить его тип в generic type parameter

Что-то вроде этого:

 import React, { FunctionComponent } from "react";

type Props = {
  name: number;
};

const ProductListItem: FunctionComponent<Props> = ({ name }) => {
  return (
    <div className="product">
      <h4>{name}</h4>
    </div>
  );
};

export default ProductListItem;

Комментарии:

1. Помогает ли это? @special3220?

2. Да, этот подход тоже работает. Кроме того, я обнаружил, что было не так с моим кодом, когда я сопоставлял все продукты, которые я установил (продукт: любой). Когда я его удалил, он начал работать

3. Супер! Вы могли бы рассмотреть возможность пометить это «принять», если это полезно для вас и других, кто это находит.

Метки: