條件屬性反應/ JSX

Question

是否有JSX做foollowing？：

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

Answer 1

您可以在「MyComponent的」使用defaultProps的更好的方式。所以你不需要發送「描述」給組件。

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