React + MaterializeCSS + выпадающие списки динамического рендеринга (позиция ошибки)

Question

Я использую ReactJS с JSX и materializeCss для стилизации.Я сталкиваюсь с этой проблемой уже пару дней ... Короче, то, что у меня есть:

class PreventiveCollection extends Component {
    componentDidUpdate = () => updateDropdowns(); // which stands for initializing materialize dropdowns
    render() {
        const myList = this.props.data.map( (i ,index) => ( 
            <li key={index} className="collection-item">
                <i data-target={i.id} className="dropdown-trigger material-icons right">more_vert</i>
                <ul id={i.id} className='dropdown-content'>
                    <li><a>option 1</a></li>
                    <li><a>option 2</li>
                </ul>
            </li>
        ));
        return <div>{myList}</div>
    }
}

Я отображаю коллекцию элементов, где у каждого элемента есть выпадающее меню.Проблема в том, что когда я нажимаю кнопку «more_vert», раскрывающийся список открывается в верхней части компонента, прямо под первой кнопкой меню.Все они работают и правильно связаны с каждым элементом.Проблема только в положении.Пожалуйста, смотрите прикрепленный экран

https://i.stack.imgur.com/PFfV4.png

На левом экране была нажата верхняя кнопка меню, все нормально.

На правом экране 3-й элементбыла нажата кнопка меню.Содержание выпадающего в порядке, но позиция неправильная.он всегда придерживается этой первой кнопки меню ...

Я пытался:

• переместить меню в отдельный компонент с его собственными функциями состояния обновления

• перемещено updateDropdowns () из componentDidUpdate в конец метода
  render ().

• переносит объекты меню в div с сочетанием положения относительного / абсолютного

ничего из вышеперечисленного не сработало.

Answer 1

Проблема была связана с MaterialCss и первым относительным родителем.Решение состоит в том, чтобы обернуть полный код меню с помощью div с относительной позицией, например:

class PreventiveCollection extends Component {
    componentDidUpdate = () => updateDropdowns(); // which stands for initializing materialize dropdowns
    render() {
        const myList = this.props.data.map( (i ,index) => ( 
            <li key={index} className="collection-item">
                <div style={{position: 'relative'}}>
                    <i data-target={i.id} className="dropdown-trigger material-icons right">more_vert</i>
                    <ul id={i.id} className='dropdown-content'>
                        <li><a>option 1</a></li>
                        <li><a>option 2</li>
                    </ul>
                </div>
            </li>
        ));
        return <div>{myList}</div>
    }
}