javascript - 如何拆分模板文字？

Question

我有一个用 react-circular-progress bar 创建的 React 组件，我想将一行分成两行，以便稍后对它们进行不同的样式设置。他们也必须在不同的行。但我不知道如何拆分它们或添加样式。

我已经尝试了这一行中我能想到的一切:text={`${value}${unit}`}

function circleProgress({ value, unit, percents, color, key }) {


    return (
        <CircularProgressbar
            key={key}
            percentage={percents}
            text={`${value}${unit}`}
            initialAnimation= {true}
            circleRatio={0.7}   
            styles={{
                root: {
                    margin: '0.5em'
                },
            }}
        />
    )

Answer 1

如果 text 属性可以接受 JSX 渲染，那么你可以这样做:

return (
    <CircularProgressbar
        key={key}
        percentage={percents}
        text={(
            <div>
                <div>{value}</div>
                <div>{unit}</div>
            </div>
        )}
        initialAnimation= {true}
        circleRatio={0.7}   
        styles={{
            root: {
                margin: '0.5em'
            },
        }}
    />
)

以上只是一个示例，不清楚您的格式要求究竟是什么。但由于您使用的是 JSX，因此它几乎可以是您想要的任何东西。

编辑:由于您使用的组件实际上呈现 SVG，您可能希望传入有效的 SVG JSX，可能与此类似:

return (
    <CircularProgressbar
        key={key}
        percentage={percents}
        text={(
            <g>
                <text>{value}</text>
                <text y="24">{unit}</text>
            </g>
        )}
        initialAnimation= {true}
        circleRatio={0.7}   
        styles={{
            root: {
                margin: '0.5em'
            },
        }}
    />
)