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

在左侧屏幕上，单击顶部菜单按钮，一切正常。

在右侧屏幕上，单击了第三项菜单按钮。下拉菜单内容不错，但位置错误。它始终坚持使用第一个菜单按钮...

我尝试过：

移动菜单以使用其自己的更新状态功能来分隔组件
将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>
    }
}

React + MaterializeCSS +动态渲染下拉列表（故障位置）

1 个答案: