React 인라인 스타일의 키 속성으로 props 사용

Question

React에서 은 키가 스타일 이름의 camelCased 버전 인 객체로 지정됩니다. 어떻게 소품을 핵심 가치로 사용 하시겠습니까?

예 :

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>; 
} 

의 삼각형 스타일을 추출