使用自动换行在 React 中渲染逗号分隔的链接答案

【问题标题】：Rendering Comma separated links in React with word wrap使用自动换行在 React 中渲染逗号分隔的链接
【发布时间】：2020-05-27 00:16:04
【问题描述】：

我正在尝试从列表中呈现链接。一切正常，直到我的链接转到下一行。

const relatedLink = _.map(personList, (person, index) => {
        const comma = index
            ? <span>,&nbsp;</span>
            : null;

        return (
            <span key={"key_" + person.name}
                  className="related-names-link">
            {comma}
                <NameLink
                    personId= {orderIdAndNumber.orderId}
                    key={"person_link_" + person.name}>
                    {person.name}
                </NameLink>
            </span>
        );
    });

    <div className="related-names-links">
         {relatedLink}
    </div>

CSS：

.related-names-links {
        display: flex;
        flex-wrap: wrap;
    }

当列表变大时，第一行姓氏的逗号转到下一行，而不是我希望逗号保留在第一行本身。

实际结果：

Jack, Tom, Jerry
, Mickey, Donald, Flintstone

预期结果：

Jack, Tom, Jerry,
Mickey, Donald, Flintstone

我尝试了Rendering comma separated list of links 的答案，但仍然得到相同的输出。

【问题讨论】：

标签： javascript css reactjs firefox

【解决方案1】：

您的跨度内容模式是, <name>，它应该是<name>,。在NameLink 之后移动{comma}，并为逗号验证检查index < personList.length - 1。

【讨论】：

符合预期的伟大作品。