如何拆分模板文字？

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

Answer 3

由於您使用的是將字符串作為道具的預包裝組件，因此該字符串僅呈現一個元素。 如果您確實要使用此軟件包，最直接的解決方案是編輯組件的源代碼。 如果您查看此包的Github中的主要組件，則可以看到render方法的相關部分：

        {text ? (
          <text className={classes.text} style={styles.text} x={CENTER_X} y={CENTER_Y}>
            {text}
          </text>
        ) : null}

您基本上可以復制該文本，以添加另一個名為myText的文本元素，或者使用自己的樣式添加任何內容。

        {text ? (
          <text className={classes.text} style={styles.text} x={CENTER_X} y={CENTER_Y}>
            {text}
          </text>
        ) : null}
        //CENTER_X and CENTER_Y will need to be re-computed to position your new text properly, or it could be done with CSS.
        {myText ? (
          <text className={classes.myText} style={styles.myText} x={CENTER_X} y={CENTER_Y}>
            {myText}
          </text>
        ) : null}

由於此組件使用defaultProps和TypeScript，因此您需要在文件開頭的聲明中定義新的prop：

type CircularProgressbarDefaultProps = {
  strokeWidth: number;
  className: string;
  text: string;
  myText: string,
  background: boolean;
  backgroundPadding: number;
  initialAnimation: boolean;
  counterClockwise: boolean;
  circleRatio: number;
  classes: {
    root: string;
    trail: string;
    path: string;
    text: string;
    myText: string,
    background: string;
  };
  styles: {
    root?: object;
    trail?: object;
    path?: object;
    text?: object;
    myText?: object;
    background?: object;
  };
};

和

  static defaultProps: CircularProgressbarDefaultProps = {
    strokeWidth: 8,
    className: '',
    text: '',
    myText: '',
    background: false,
    backgroundPadding: 0,
    initialAnimation: false,
    counterClockwise: false,
    circleRatio: 1,
    classes: {
      root: 'CircularProgressbar',
      trail: 'CircularProgressbar-trail',
      path: 'CircularProgressbar-path',
      text: 'CircularProgressbar-text',
      background: 'CircularProgressbar-background',
    },
    styles: {
      root: {},
      trail: {},
      path: {},
      text: {},
      myText: {},
      background: {},
    },
  };

然后，您可以像使用內置文本道具一樣使用myText。 最煩人的部分可能是正確放置它，因為它使用SVG元素，它們具有自己的坐標屬性，您需要自己在組件文件中進行操作，或者嘗試按照我的注釋中的說明使用CSS進行覆蓋。 簡單的顏色對比可能比它值得的麻煩更多，但這只是我的觀點。

希望這可以幫助！

編輯：實際上，我認為jered的解決方案將與可接受的SVG元素一起使用，不確定嵌套節點是否會引起任何問題，但是您可以肯定地將它們成功插入。 同樣，最大的障礙是樣式/位置。