Не компилируется компонент

@tiny developer · Регистрация: 27.06.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. Я новичок в ReactJS, только изучаю его. Я написала небольшой компонент, но при компилации через webpack babel получаю ошибку и не понимаю, то неправильно я написала ? Подскажите, пожалуйста, мне.
Привожу код моего компонента:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React from "react";
 
class FileLoader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [{ title: "", comment: "", path: "" }]
        };
    }
 
    row() {
        return (
            {
                props.data.map((data, index) => (
                    <tr key={ index }>
                        <td><input type="text" name="title" value={ data.title } className="form-control" /></td>
                        <td><input type="text" name="title" value={ data.comment } className="form-control" /></td>
                        <td><input type="file" name="title" value={ data.path } className="form-control" /></td>
                        <td><button className="btn btn-outline-success" onClick={() => (deleteTableRows(index))} >-</button></td>
                    </tr>
 
                ))
            }
        );
    }
 
    addTableRows() {
        props.data.push({
            title: "",
            comment: "",
            path: ""
        });
    }
 
    deleteTableRows(index) {
        props.data.rows.splice(index, 1);
    }
 
    render() {
 
        return (
            <div className="container">
                <div className="row">
                    <div className="col-sm-8">
                        <table className="table">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Comment</th>
                                    <th>Путь</th>
                                    <th>Действие</th>
                                </tr>
                            </thead>
                            <tbody>
                                {row()}
                            </tbody>
                        </table>
                    </div>
                    <div className="col-sm-4">
                        <button className="btn btn-outline-success" onClick={addTableRows}>+</button>
                    </div>
                </div>
            </div>
        );
    }
}
export default FileLoader;

Скриншот ошибки:

@tiny developer · 21.02.2024, 10:48 **[ТС]**

благодарю вас снова за ответ. Я нашла проблему. Я просто в методе sendFileToServer изменила модификатор const на var
и объект стал обновляться)
Но у меня есть и ещё одна проблема... я пытаюсь подключить файл стилей, но стили из него не применяются...
вот как я это делаю:

JavaScript
1
import css from "./style.css"

это я добавила вначале файла table.tsx
почему у меня не применяются стили ? Я просто в тегах div или input добавила классы вот так:

HTML5
1
<div class="message" >

в файле style.css просто прописала ему стили:

HTML5
1
2
3
.message {
    width: 700px;
}

я и в консоли браузера не вижу вообще этого стиля, чтобы можно было посмотреть что стиль подтянулся...

Добавлено через 2 минуты
причем ранее когда я писала классовый компонент стили подтягивалиьс! Правда я тогда не использовала typescript и а только
jsx. И расширение фала компонента у меня было jsx, а не tsx

krvsa · 21.02.2024, 12:02

Сообщение от tiny developer

вот как я это делаю:

JavaScript
1
import css from "./style.css"

Если проект собран правильно - стили подключаются вот так

JavaScript
1
import './style.css';

Добавлено через 1 минуту
Там далее "сборщик" все делает сам...

Добавлено через 1 минуту
Вот статейка про "10 способов стилизации" в Реакт
https://www.cat-in-web.ru/10-ways-to-style-react/

Добавлено через 37 минут

Сообщение от tiny developer

изменила модификатор const на var
и объект стал обновляться

Тогда уже заменила бы на let...
var это уже совсем старье.

Добавлено через 1 минуту
P.S.
Не пихай все вопросы в одну единственную тему...
1 вопрос - 1 тема.

Так и самой потом искать и отслеживать будет легче.
Некоторые вообще не станут смотреть тему с большим количеством сообщений.

@tiny developer · 21.02.2024, 12:05 **[ТС]**

cпасибо! Это сработало:

JavaScript
1
import './style.css';

Новые блоги и статьи Все статьи Все блоги /
сукцессия 29. Переход от одних деревьев на другие делать более или менее вероятностным? anaschu 12.07.2026 Насколько смена типов микоризы — исключительное событие в двухвековой сукцессии? Оценка вероятности в пространстве параметров В текущей версии модели успешно реализован ключевой механизм. . .	сукцессия 27. Думаю, как переделывать уже написанную статью с планами на сукцессию. anaschu 12.07.2026 Анализ соответствия модели требованиям Реализованные компоненты: Механизм закисления почвы через протонную помпу Конкуренция между типами микориз pH как триггер сукцессии C/ P соотношение. . .	Сукцессия 26. Мат модель создана. anaschu 12.07.2026 Модель смены растительных сукцессий посредством управления грибами работает внутри небольшой ячейки почвы, восстанавливающейся после пожара, где ненадолго бывшее царство хвойных снова захватили. . .	Решил проблему с ошибкой пагинации сообщений с сервера на алгоритме обхода дерева "Эстафета хвоста". Hrethgir 12.07.2026 Проблема была в том, что удалялась именно новая кнопка, а не старая. Ни один ИИ не обнаружил это, а сам я смог только когда с работой стало попроще и когда заставил работать будущее автономное. . .
сукцессия 25. Хронология ошибок anaschu 12.07.2026 # От 50-тонного гриба до устойчивого леса: хроника ошибок при построении модели вековой сукцессии микоризы ## О чём эта статья В процессе построения ОДУ-модели (система дифференциальных. . .	сукцессия 24. Промежуточное общее описание модели anaschu 12.07.2026 Хендофф: модель АМ→ЭКМ сукцессии микоризы (ризосфера, 50 лет) Содержание проекта Симуляция вековой (50 лет) экологической сукцессии в почве леса Основные участники: АМ-гриб, ЭКМ-гриб,. . .	сукцессия 23. Более физиологичная физиология, более экологичная экология, более диффурные диффуры. anaschu 12.07.2026 Что реально нашли и починили за эти 5 часов Правило Линдемана (КПД конверсии сахара в тело, kEff) — раньше 100% полученного углерода шло прямо в биомассу гриба; теперь только kEff=0. 5 (после. . .	сукцессия 22. От артефактов к физиологии: калибровка агентной модели грибной сукцессии для воспроизведения сезонной динамики и pH-плато anaschu 11.07.2026 Аннотация В данной работе представлена калибровка агентной модели динамики грибных сообществ (fungal-succession), направленная на устранение нефизичных артефактов (коллапс биомассы, мгновенное. . .