Я работаю с реактивным администратором (поэтому мой контент извлекается из моего API), и я создал кнопку, чтобы минимизировать длину текста, чтобы ячейки моей таблицы не имели большой высоты и сохраняли легко читаемую таблицу.
Вот мой код:
const [isMinimized, setIsMinimized] = useState(false);
useEffect(() => {
if (isMinimized) {
// reduce texts size
const spans = document.getElementsByClassName("MuiTypography-body2");
const spansList = [...spans];
for (const span of spansList) {
if (span.textContent.length > 20) {
span.textContent = span.textContent.substring(0, 20) + "..."
}
}
}
}, [isMinimized]);
Я запускаю эту функцию с состоянием, которое меняется, когда я нажимаю кнопку «свернуть содержимое».
Теперь я хотел бы применить эту функцию, но когда страница смонтирована. Не по событию клика. Я хочу избавиться от кнопки.
Поэтому я попытался установить для своего состояния isMinimized значение true и применить свой useEffect, когда он истинен, но при загрузке первой страницы он не работает.
Есть идеи, как этого добиться?
PS: Это не работает при загрузке страницы, но если я перехожу к другому компоненту и возвращаюсь, это работает. Итак, я хотел бы применить свой useEffect при загрузке первой страницы.
@Naveen неправда, useEffect
хуки, содержащие зависимости, все еще работают, когда компонент смонтирован
@Naveen, да, я думаю, что мой useEffect применяется до того, как контент span поступит из API
Насколько я понимаю, вы хотите свести к минимуму количество ячеек при загрузке страницы и полностью избавиться от кнопки свертывания.
Вы можете добиться этого, просто передав пустой массив в массив зависимостей следующим образом:
useEffect(() => {
// reduce texts size
const spans = document.getElementsByClassName("MuiTypography-body2");
const spansList = [...spans];
for (const span of spansList) {
if (span.textContent.length > 20) {
span.textContent = span.textContent.substring(0, 20) + "..."
}
}
}, []);
Передача пустого массива зависимостей позволит функции, переданной в useEffect
, выполняться при первом рендеринге, что устраняет необходимость в переменной состояния.
В качестве альтернативы, более простым способом достижения того же результата было бы использование свойства CSS Text Overflow ellipsis
для усечения строк при сохранении содержимого следующим образом:
.truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Подробнее об этом здесь
Здравствуйте, спасибо за ваш ответ. Это была моя первая попытка, но (может быть, из-за react-admin?) она не работает. он поместил мой текст только в одну строку. Так что проблема не в высоте, а в ширине, ха-ха
Наконец-то мне удалось заставить работать css, обойдя некоторые классы реактивного администратора :) спасибо!!
Хотя приведенный вами код реакции мог решить проблему (похоже, что это не так), ваше понимание неверно. useEffect будет работать при монтировании, даже если список зависимостей не пуст.
@nullptr Я знаю это. Проблема с использованием переменной состояния isMinimized в хуке заключается в том, что когда она срабатывает при рендеринге, isMinimized будет ложной, поэтому она не будет запускать этот фрагмент кода. Я надеялся, что его запуск без этого условия может решить проблему.
вы можете добавить пустой массив зависимостей в useEffect для работы с componentDidMount, если не консоль значения промежутков, возможно, элементы не отображаются в DOM