插入變量到一個字符串

儘管一個有經驗的程序員，我對js是完全陌生的並且有反應。我想在我自己的組件內使用react-native-svg組件Path。所有的例子都很清楚，但是它使用了一個字符串來表示座標。例如：插入變量到一個字符串

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

不過，我想使用我的組件的道具x1，y2，x2，座標y2而不是文字，但我無法弄清楚如何將它們種植到引用字符串的各種人物一起其中M和L是例子。

您需要一個帶有道具的通用路徑組件，或者具有不同數字的確切路徑？ –

請參閱http://stackoverflow.com/questions/21668025/react-jsx-access-props-in-quotes –

如果使用ES2015的特性，template strings將是一個可行的方法，例如：

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

注意反引號，而不是報價。

2016-11-04 17:19:17 Timo

這工作，謝謝。有沒有任何方法查看上面構建的代碼生成的完整路徑標記？類似於查看瀏覽器中網頁的源代碼。 – quanglewangle

您可以像使用其他表達式一樣使用模板字符串，它們將計算爲字符串。 I.e .:'const path = \'... \';的console.log（路徑）;返回<路徑d = {路徑} ... />' – Timo

這看起來像我有的類似question。您可以傳入一組項目並加入它們以創建您的字符串。

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

2016-11-04 17:26:35 user6213384

回答