将变量插入字符串

Question

虽然我是一名经验丰富的程序员，但我对 js 和 React 完全陌生。

我正在尝试在我自己的组件中使用 react-native-svg 组件 Path。示例中的一切都很清楚，但它使用字符串文字作为坐标。例如：

<Path d="M 10 20 L 30 40" stroke="red" />

但是我想使用组件道具 x1、y2、x2、y2 中的坐标而不是文字，但我不知道如何将它们连同 M 和 L 是示例的各种字符一起放入引号字符串中。

Answer 1

如果您使用的是 ES2015 功能，template strings 是一种可能的方法，例如：

<Path
    d={`M ${this.props.x1} ${this.props.y1} L ${this.props.x2} ${this.props.y2}`}
    stroke="red"
/>

注意反引号而不是引号。

Answer 2

这看起来像我以前的。您可以传入一组项目并将它们加入以创建您的字符串。

<Path d={['M', x1, y1, 'L', x2, y2].join(' ')} stroke="red" />

Interpolating variables into a string