Question

有没有更好的办法在jsx中进行愚弄？：

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

＆＃13;

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

＆＃13;

Answer 3

如果将描述准备为对象，则可以使用传播运算符将其传递。对于未定义的值，它将不会显示。

例如

const desc = {
  description: 'Your description'
}
// description property set
let jsxWithDesc = <MyComponent id="1" name={name} {...desc} />;


const descUndefined = {
  description: undefined
}
// description property _not_ set
let jsxWithoutDesc = <MyComponent id="1" name={name} {...descUndefined} />

react / jsx中的条件属性

3 个答案: