javascript - 如何拆分模板文字？

我有一个用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'
                },
            }}
        />
    )

最佳答案

如果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'
            },
        }}
    />
)

关于javascript - 如何拆分模板文字？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55958479/