Блог

Главная - Вопросы по программированию - Что это означает, когда функциональный компонент React возвращает JSX.Внутренние элементы

Что это означает, когда функциональный компонент React возвращает JSX.Внутренние элементы

#reactjs #typescript #jsx

Вопрос:

Я нашел этот функциональный компонент react в некоторой документации

 import React, { useState, useEffect } from 'react';
import { fabric } from 'fabric';

interface ITextProps {
  id: string;
  options: fabric.ITextboxOptions;
  canvas: fabric.Canvas;
  onChange: (id: string, options: fabric.ITextboxOptions) => void;
}
export function Text({ onChange, id, canvas, options }: ITextProps) {
  const [textbox] = useState<fabric.Textbox>(() => new fabric.Textbox(options.text ?? '', options));

  useEffect(() => {
    canvas.add(textbox);
  }, [canvas, textbox]);

  useEffect(() => {
    textbox.setOptions(options);
  }, [options, textbox]);

  useEffect(() => {
    const update = () => {
      onChange(id, textbox.toObject());
    };
    textbox.on('moved', update);
    textbox.on('scaled', update);
    textbox.on('rotated', update);
    textbox.on('changed', update);
  }, [id, onChange, textbox]);

  return <></>;
}

Сначала я не понял , что это за возвращаемый jsx этой функцией, но когда я попытался добавить имя класса к возвращаемому<><></>, я получил ошибку

Свойство ‘Имя класса’ не существует для типа ‘JSX.Внутренние элементы».

Все, что я мог найти в качестве документации о внутренних элементах, было вот это, но я не видел там примера, где были бы только пустые скобки, подобные этому.

Я также подумал, что это может быть сокращением машинописного текста, но я не уверен в этом, что значит вернуть <><></> ?

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

1. <><></> называется фрагментами реакции </> reactjs.org/docs/fragments.html

2. <></> это реакция. Тип фрагмента

3. Вы должны использовать это в качестве ответа

Ответ №1:

спасибо, ребята, на самом деле это сокращение для фрагмента react, которого я не знал https://reactjs.org/docs/fragments.html#short-syntax

Метки: ,