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

由于您使用的是预打包的组件，该组件将字符串作为道具，因此该字符串仅呈现一个元素。如果您确实要使用此软件包，最直接的解决方案是编辑组件的源代码。如果您查看main component in this package's 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元素一起使用，不确定嵌套节点是否会引起任何问题，但是您可以肯定地将它们成功插入。同样，最大的障碍是样式/位置。

如何拆分模板文字？

3 个答案: