2016-11-04 5 views
2

経験豊富なプログラマーですが、私はjsを全く新しくして反応します。変数を文字列に補間する

私はreact-native-svgコンポーネントPathを自分自身のコンポーネント内で使用しようとしています。この例ではすべてが明確ですが、座標に文字列リテラルが使用されています。例えば:私は、様々な文字と一緒に引用符で囲まれた文字列にそれらを植える方法を見つけ出すことはできません代わりに、リテラルのy2が、私のコンポーネントの小道具x1y2x2、からの座標を使用したいしかし

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

MおよびLは例である。

+0

一般的なパスコンポーネントには、小道具、またはこの正確なパスが異なる番号が必要ですか? –

+0

参照してくださいhttp://stackoverflow.com/questions/21668025/react-jsx-access-props-in-quotes –

答えて

4

あなたはES2015の機能を使用している場合は、template stringsが可能なアプローチとなり、例えば:

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

はバッククォートの代わりに引用符に注意してください。

+0

これは、ありがとう、働いています。上のコードがビルドされた完全なPathタグ​​を表示する方法はありますか?ブラウザのWebページのためにView Sourceに類似したもの。 – quanglewangle

+0

他の式のようなテンプレート文字列を使うことができます。テンプレート文字列は文字列に評価されます。私は: 'const path = \' ... \ '; console.log(path); return <パスd = {パス} ... /> ' – Timo

2

これは私が持っていたのと同じように見えます。question配列の配列を渡して結合して文字列を作成することができます。

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