React通过props接收数组渲染列表时项横向排列如何解决

解决方案 #

错误根源 #

你对传入的list参数做了多余的数组嵌套：传入的list本身就是存储链接的一维数组，代码里const cardsList = [list]将其封装成了二维数组，遍历的时候每次循环拿到的是完整的链接数组而非单个链接项，所有内容被塞进同一个<li>中，就会出现并排显示的效果。同时<li>标签需要嵌套在<ul>/<ol>列表容器内，不符合HTML规范的写法也可能引发样式异常。

修正后的CardBase组件代码 #

export default function CardBase({ list, title }) {
    // 渲染列表逻辑
    function renderLinkList() {
        // 没有传入list或者list为空时不渲染列表
        if (!Array.isArray(list) || list.length === 0) return null;
        return (
            <ul>
                {list.map((linkText, index) => 
                    <li key={index}>{linkText}</li>
                )}
            </ul>
        )
    }

    return (
        <Card className=''>
            <CardContent>
                <Typography className='' color='' gutterBottom>
                    {title}
                </Typography>
                <Typography className='' variant='' component=''>
                    {renderLinkList()}
                </Typography>
            </CardContent>
        </Card>
    );
}

额外排查点 #

如果修改后仍然出现横向排列的情况，检查全局样式或者当前组件样式中是否给<li>设置了display: inline、display: inline-block或者父容器设置了flex布局导致元素横向排列，将<li>的display属性改为默认的list-item即可恢复上下排列的效果。

内容的提问来源于stack exchange，提问作者user16603183