如何拆分模板文字？

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'

            },

        }}

    />

)

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/));