React + MaterializeCSS + 动态渲染下拉菜单（故障位置）答案

【问题标题】：React + MaterializeCSS + dynamic rendering dropdowns (fault position)React + MaterializeCSS + 动态渲染下拉菜单（故障位置）
【发布时间】：2018-10-12 08:22:46
【问题描述】：

我正在使用带有 JSX 的 ReactJS 和 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 包装菜单对象，混合位置相对/绝对

以上都没有奏效。

【问题讨论】：

标签： reactjs dropdown materialize jsx

【解决方案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>
    }
}

【讨论】：