React.js : 조건이 참일 때만 방생복을 설정하십시오.

Question

나는 react.js를 처음 사용하고 자녀에게 소품을 전달하는 데 어려움을 겪었습니다. 나는 이런 식으로 뭔가를하고 싶지 : 조건에 해당하는 경우

render: function(){ 
    var idProp = this.props.id ? 'id={this.props.id}' : null; 
    return (
    <div {idProp} /> 
    ); 
} 

그래서 소품 ID는 단지 통과해야합니다. 하지만 위의 코드는 작동하지 않습니다. 이것이 가능합니까? 내가 도대체 ​​뭘 잘못하고있는 겁니까? 감사합니다.

Answer 1

var idProp = this.props.id ? 'id={this.props.id}' : null;은 자바 스크립트 방식으로 작성되어야합니다. 또한 "id ="를 JSX 구문으로 이동해야합니다.

JSX 컴파일러는 코드를 먼저 순수 js로 변환합니다. dom 요소를 만들려면 React.createElement(...) 함수를 사용합니다. 함수의 매개 변수를 식별하기 위해 JSX 컴파일러는 정적 인 요소의 속성 이름을 필요로합니다. 위의 코드의 자바 스크립트는 다음과 같이 변환됩니다.

render: function(){ 
    var idProp = this.props.id ? this.props.id : null; 
    return (
    React.createElement("div", {id: idProp}) 
    ); 
} 

Answer 2

사용하는 경우 스프레드 연산자로이 작업을 깔끔하게 할 수 있습니다.

render: function() { 
    var optionalProps = {}; 
    if (something) optionalProps.id = id; 
    return (<div {...optionalProps} />); 
}