React: CSS没有在反勾下应用

Question

我从我的函数返回一个像这样的字符串。

getCenterTextContent: (num, unit = '%') => {
return `<span style={{fontSize: "25px"}}>${thisObject.state.num}${unit}</span><br/><br/><span style={{fontSize: "16px"}}>${thisObject.state.used}/${thisObject.state.total}</span>`;
}

这是创建像这样的DOM元素

所以CSS不能被应用。如何处理它

Answer 1

在函数中返回JSX元素时，应该使用()而不是' '。你当前的方法返回一个字符串，我想这就是为什么CSS没有被应用，因为当捆绑时它不会读取它作为JSX。

试试这样写:

const getCenterTextContent = (num, unit = '%') => (
<>
<span style={ { fontSize: '25px' } }>
${thisObject.state.num}${unit}
</span>
<br /><br />
<span style={ { fontSize: '16px' } }>
${thisObject.state.used}/${thisObject.state.total}
</span>
</>
)

可以使用()而不是{}从函数隐式返回，因此不需要添加完整的返回语句。在返回JSX时还需要有一个父元素，我使用了<>这是React Fragment的简写，它充当父容器而不创建不必要的HTML。

这是未经测试的，所以可能需要一些编辑来得到你所需要的。

同时假设你的函数由于某种原因不需要返回字符串，如果是的话，我建议你重新考虑你的方法。