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}。：〜）

有几种方法可以conditional rendering in React。一种方法是

{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语法中使用IIFE：

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

在react自定义组件中创建条件部分

2 个答案: