在react自定义组件中创建条件节

Question

我正在创建一个呈现容器框的自定义组件。组件最初看起来如下所示：

import React from 'react';
import { Row, Col } from 'react-flexbox-grid';

const Box = (props) => (
    <div className="box">
        <Row between="xs" className="box-top">
            <span className="box-title">{props.title}</span>
        </Row>
        <Col xs={12} className="box-info">
            {props.content}
        </Col>
        <Col xs={12} className="box-bottom">
        </Col>
    </div>
);

export default Box;

它显示一个带有类框的div，其中包含用于生成外观的CSS。除了box-info外，内部div都是有条件的。有时，这个组件将与一个方框标题一起使用，而有时却不是。同样的情况发生在盒子底部。

当我使用它时，我想使用这样的东西：

<Box
    showTitle
    title={'Title'}
    content={'My content is here'}
/>

有时候是这样的：

<Box
    showTitle={false}
    showBottom={false}
    content={'My content is here'}
/>

如果使用showTitle = false或showBottom = false，如何设置道具以允许框标题和框底隐藏？

提前谢谢你

Answer 1

您可以通过简单地省略它来编写showTitle={false}。*~)

有几种方法可以实现反应中的条件渲染。一种方法是

{props.showTitle &&
  <Row between="xs" className="box-top">
    <span className="box-title">{props.title}</span>
  </Row>
}

如果存在props.showTitle，它将呈现逻辑&&运算符之后的任何内容。

如果不满足条件，也可以使用三元运算符，如

{props.showTitle ? (
  <Row between="xs" className="box-top">
    <span className="box-title">{props.title}</span>
  </Row>
) : (
  <SomeOtherComponent />
)}

另外，您可以查看prop-types，以检查组件接收的props类型。

Answer 2

还有第三种选择，即在JSX语法中使用生平：

{(() => {
  if (isSomethingTrue === true) {
     return <MyComponent />
  } else {
     return 'Whoops!'
  }    
})()}