如何拆分模板文字？

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 (&nbsp; &nbsp; <CircularProgressbar&nbsp; &nbsp; &nbsp; &nbsp; key={key}&nbsp; &nbsp; &nbsp; &nbsp; percentage={percents}&nbsp; &nbsp; &nbsp; &nbsp; text={(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{value}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{unit}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; initialAnimation= {true}&nbsp; &nbsp; &nbsp; &nbsp; circleRatio={0.7}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; styles={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; root: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: '0.5em'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; />)以上仅是示例，目前尚不清楚您的格式要求是什么。但是，由于您使用的是JSX，因此可以随心所欲。编辑：由于您正在使用的组件实际上呈现了SVG，因此您可能希望传递有效的SVG JSX，也许与此类似：return (&nbsp; &nbsp; <CircularProgressbar&nbsp; &nbsp; &nbsp; &nbsp; key={key}&nbsp; &nbsp; &nbsp; &nbsp; percentage={percents}&nbsp; &nbsp; &nbsp; &nbsp; text={(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <text>{value}</text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <text y="24">{unit}</text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; initialAnimation= {true}&nbsp; &nbsp; &nbsp; &nbsp; circleRatio={0.7}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; styles={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; root: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: '0.5em'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; />)

Answer 2

正如jered所指出的那样，尚不清楚要获得什么结果，但是如果您只想将它们分为两行，则可以\n在变量之间使用换行符，然后再将其拆分。我认为jered的答案更加灵活，因为您可以传入自定义样式的组件，但是如果您的组件不接受该道具的JSX，则可能会有所帮助。var val1 = "test";var val2 = "tset";var combined = `${val1}\n${val2}`;console.log(`Combined: ${combined}`);console.log('Split');console.log(combined.split(/\n/));