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

Question

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

以上都没有奏效。

标签： reactjsdropdownmaterializejsx

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>
    }
}