Reactインラインスタイルのキープロパティとしてpropsを使用

Question

Reactでは、は、キーがスタイル名のラクダのケースバージョンであるオブジェクトで指定されます。キー値としてどのように小道具を使用しますか？

例：

const { 
    position 
} = this.props; 

let triangleStyle = { 
    borderLeft: '5px solid transparent', 
    borderRight: '5px solid transparent', 
    `border${position}`: '5px solid red' 
}; 

function Component() { 
    return <div style={triangleStyle}></div>; 
} 

Answer 1

を：

を内のすべてのロジックを入れてコンポーネント、使用：computed property names

function Component({ position }) { 
    const triangleStyle = { 
    borderLeft: '5px solid transparent' 
    borderRight: '5px solid transparent', 
    [`border${position}`]: '5px solid red', 
    } 

    return <div style={triangleStyle} /> 
} 

あるいは、機能

const getTriangleStyle = position => ({ 
    borderLeft: '5px solid transparent' 
    borderRight: '5px solid transparent', 
    [`border${position}`]: '5px solid red', 
}) 

function Component({ position }) { 
    return <div style={getTriangleStyle(position)} /> 
} 

Answer 2

ような何か試してみてください：我々は、我々は可能性ができるスタイルのキー値を計算しているので

const triangleStyleFoo = (position) => ({ 
    borderLeft: '5px solid transparent', 
    borderRight: '5px solid transparent', 
    `border${position}`: '5px solid red' 
}); 

function Component() { 
    const { position } = this.props; 
    const triangleStyle = this.triangleStyleFoo(position); 
    return <div style={triangleStyle}></div>; 
} 

Answer 3

const { 
    position 
} = this.props; 

let triangleStyle = { 
    borderLeft: '5px solid transparent', 
    borderRight: '5px solid transparent' 
}; 

triangleStyle[`border${position}`] = '5px solid red' 
function Component() { 
    return <div style={triangleStyle}></div>; 
} 

に三角形のスタイルを抽出