Material-ui: [ListItem] rightIconButton: ошибка стиля с пользовательским компонентом IconMenu

Созданный на 13 апр. 2016 · 4Комментарии · Источник: mui-org/material-ui

Здравствуйте,

Прежде всего, спасибо за отличную работу над этой библиотекой;)

У меня есть несколько ошибок положения при использовании настраиваемых компонентов. Вот пример настраиваемого IconMenu, используемого в ListItem.rightIconButton:

// With my custom component
<ListItem>
    [...]
    rightIconButton={<CustomComponentListMenu />}
/>

// CustomComponentListMenu.jsx
[...]
render() {
        return (
            <IconMenu iconButtonElement={this.iconButtonElement} >
                <MenuItem onClick={this.onDelete}>Delete</MenuItem>
            </IconMenu>
        );
    }

IconMenu работает хорошо, но расположение меню значков неудовлетворительное (см. Приложенный снимок экрана).

На самом деле, я думаю, проблема в том, что стиль (position: absolute, right: 4, top: 12) применяется к моему тегу пользовательского компонента (<CustomComponentListMenu>), а НЕ к тегу IconMenu (<IconMenu>).
См. ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622), где _rightIconButtonElement_ - это мой настраиваемый элемент, а не iconMenu.

Я понимаю, что это не совсем ошибка, но это серьезное ограничение при использовании пользовательского компонента (в этом весь смысл React, не так ли?).

Обратите внимание, что эта «ошибка» также проявляется в других компонентах, таких как Avatar в ListItem.leftAvatar.

Скриншот:
screen-bug-mui-listitem

Как вы думаете, мы сможем найти решение, позволяющее использовать нестандартные компоненты?

Версии

Материал-UI: 0.15.0
Реакция: 14,7
Браузер: Chrome, Firefox

bug 🐛 List

Источник

Colmea

👍2

Самый полезный комментарий

Я только что испытал такое же странное поведение. Покопавшись в этом, может показаться, что опору rightIconButton нужен элемент, а не компонент. Попробуйте изменить rightIconButton={<CustomComponentListMenu />} на rightIconButton={(new CustomComponentListMenu).render()} . Для функциональных компонентов без сохранения состояния попробуйте <Component /> -> Component() .

(Обратите внимание, что React.createElement(Component) не работает; я не разбирался в деталях, почему)

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

jlroettger 19 мая 2016

👍7

Все 4 Комментарий

(Обратите внимание, что React.createElement(Component) не работает; я не разбирался в деталях, почему)

jlroettger 19 мая 2016

👍7

Вы передаете ...props ? У меня была такая же проблема с Аватаром. Я предполагаю, что MUI устанавливает некоторые реквизиты внутри.

Мой пользовательский компонент Avatar выглядит так:

...
const Avatar = (props) => {
  const propsWithoutMember = { ...props };
  delete propsWithoutMember.member;
  return (
    <MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
  );
};
...

Мне пришлось удалить свои собственные проптипы, прежде чем передавать их, иначе MUI будет жаловаться на неизвестные реквизиты.

jonespen 27 сент. 2016

👍2

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

jlroettger 29 сент. 2016

👍1

Мы переносим компонент на ветку v1-beta . Мы реализовали его с нуля. Хотя мы не тестировали его, я думаю, что проблема, скорее всего, исправлена в этой ветке. Значит, закрываю.
Тем не менее, мы будем принимать исправления PR до тех пор, пока v1-beta не возьмет на себя основную ветку.