当想要什么都不返回时，在 React 的 JSX 中的三元运算符中返回什么？

Question

如果variable为false，我希望三元运算符结果不返回任何值，但我应该在分号后面放什么？我相信这里有一个常见的做法，但这是我的临时方法

render() {
const { classes, conversation } = this.props;
return (
{conversation
? (<Box className={classes.chipHolder}>
<Chip
label={this.state.numOfUnviewedMessages}
size="small"
color="primary"
/>
</Box>) 
: (<div/>)
}
);
}

Answer 1

您可以返回null:

class App() {
render() {
const { classes, conversation } = this.props;
return conversation ? (
<Box className={classes.chipHolder}>
<Chip
label={this.state.numOfUnviewedMessages}
size="small"
color="primary"
/>
</Box>
) : null)
}

}

来源：https://reactjs.org/docs/conditional-rendering.html#preventing-来自呈现的组件