Safari上React有时候渲染span内容显示不正确的解决方法

2022-11-27

React项目中有一个奇怪的现象，Safari上有时候span内容显示不正确，不及时更新内容，而在其他浏览器上正常。

最后解决方法是给span元素添加【display: inline-block;】，具体原因未知。

逻辑很简单，组件如下：

const names = {
    'a': '力导图',
    'b': '树状图',
}

export default function LayoutConfig(props) {
    const layoutName = props.layoutData.name;

    return (
    	<>
    		<div className={styles.config}>
                <p className={styles.name}><span>{ names[layoutName] }</span></p>
    		</div>
		</>
    )
}

CSS

.config {
    padding: 15px;
    font-size: 12px;

    .name {
        border-top: 1px solid #cbcccc;
        text-align: center;

        span {
            display: inline-block;
            position: relative;
            top: -7px;
            background: #f4f4f4;
            padding: 0 8px;
            font-weight: bold;
        }
    }
}
react_logo

（版权归cpury.com所有，转载请注明出处。）

WEB开发