Блог

Главная - Вопросы по программированию - Передача реквизитов в материал-UI HOC

Передача реквизитов в материал-UI HOC

#javascript #reactjs #material-ui

Вопрос:

У меня есть пользовательский компонент, который вызывает другой пользовательский компонент, созданный с использованием withStyles. Это выглядит примерно так

 import {FormControl, InputBase, InputLabel, withStyles} from "@material-ui/core";
import React from "react";

export const CustomInput = withStyles((theme) => ({
    ...
    }
}))(InputBase);

export const CustomTextField = (props) => {
  ...

  return (
        <FormControl fullWidth >
            <CustomInput
                id={id}
                fullWidth
                onChange={e => onChange(e)}
                value={value}
                variant={'outlined'}
                disabled={disabled}
                name={name}
                height={height}
                multiline={multiline}
                minRows={3} maxRows={10}
            />
        </FormControl>
  );
}

Я получаю сообщение об ошибке saying React does not recognize the "minRows" prop on a DOM element. , а также «maxRows». Но когда я смотрю на InputBase API, присутствуют как минимальные, так и максимальные значения. Это использование пользовательского интерфейса v4 material

РЕДАКТИРОВАТЬ: Скриншот DOM

Ответ №1:

minRows и maxRows действительны только тогда, когда multiline установлено значение true:

https://mui.com/api/input-base/

Что происходит, когда для multiline установлено значение false, так это то, что все неизвестные / неиспользуемые реквизиты передаются базовому элементу DOM. Поскольку minRows и maxRows не являются допустимыми атрибутами DOM, это объясняет ошибку, которую вы получаете. Убедитесь, что вы устанавливаете минимальные / максимальные строки только тогда, когда многострочность на самом деле истинна. Я не в том месте, где я мог бы это проверить, но я верю, что вы можете это сделать:

 minRows={multiline ? 3 : null}
maxRows={multiline ? 10 : null}

ОБНОВЛЕНИЕ: убедитесь, что вы используете последнюю версию MUI — вы можете сделать это, запустив npm update или yarn upgrade .

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

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

2. Можете ли вы взглянуть на DOM и посмотреть, к какому элементу он применяется? Вы должны увидеть minRows на каком-то элементе в dom. document.querySelector('[minRows]') должен найти элемент из консоли инструментов разработчика браузера.

3. Я добавил скриншот к исходному сообщению о том, как выглядит DOM, реквизит добавляется в InputBase-root, который является div. Вот почему это не работает, но я не уверен в решении для этого.

4. Я воссоздал код, который вы нам показали, и он работает так, как ожидалось, поэтому у вас должно быть что-то еще. Вы можете начать с этого рабочего пера и добавлять элементы по одному, пока он не станет больше похож на ваше приложение — ошибка должна проявиться: codepen.io/DesignByOnyx/pen/zYdzZgx

5. Хорошо, я наконец понял, проблема была не в коде. Как вы показали, это работает в вашем примере. Проблема заключалась в том, что я использовал версию 4.11.4, я обновился до 4.12.3, и теперь она работает правильно. Большое спасибо за вашу помощь, Райан

Метки: