Условное свойства в реакцию/JSX

Question

Есть ли лучше способ делать foollowing в JSX ?:

let jsx; 
if (description) 
{ 
    jsx = <MyComponent id="1" name={name} description={description} /> 
} 
else 
{ 
    jsx = <MyComponent id="1" name={name} /> 
} 

Answer 1

Вы можете использовать defaultProps в «MyComponent». Поэтому вам не нужно отправлять «описание» в компонент.

MyComponent.defaultProps = { 
    description: "" //Empty or something 
} 

Answer 2

Внутри компонента ребенка вы могли бы сделать

Codepen

class Child extends React.Component { 
 
    render() { 
 
\t \t var toReturn; 
 
\t \t if(this.props.description){ 
 
\t \t toReturn =this.props.description; 
 
\t \t }else{ 
 
\t \t toReturn = null; 
 
\t \t } 
 
\t \t return (<div> 
 
    {toReturn} 
 
    </div>); 
 
    } 
 
}