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

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

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;

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

从“React”导入React；
从'react flexbox grid'导入{Row，Col}；
常量框=（道具）=>(
{props.title}
{props.content}
);
导出默认框；

它显示一个包含CSS的div with class框来生成外观。内部div（box info除外）是有条件的。有时，此组件将与框标题一起使用，有时则不是。同样的情况也发生在盒子底部

当我使用它时，我想使用如下内容：

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

有时是这样的：

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;

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

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

---

提前感谢您

您可以通过省略它来编写

showttitle={false}

。~）

有几种方法可以做到这一点。一种方法是

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

---

作为旁注，您可以查看并检查组件接收的

道具的类型。
您可以通过省略它来编写
showttitle={false}
。：~）

有几种方法可以做到这一点。一种方法是

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

作为旁注，您可以查看以检查组件接收的
道具的类型。
还有第三个选项，包括在JSX语法中使用：

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

{（（）=>{
如果（isSomethingTrue===true）{
返回
}否则{
回答“哎呀！”
}    
})()}
还有第三个选项，它包括在JSX语法中使用：

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

{（（）=>{
如果（isSomethingTrue===true）{
返回
}否则{
回答“哎呀！”
}    
})()}
太棒了。非常感谢。我意识到你拿走了
这个。
我是在使用你的代码时发现的。但是也感谢您在这里做了更改是的，我注意到您有一个无状态组件，但在我第一次回答时忘了取下
this
。太棒了。非常感谢。我意识到你拿走了
这个。
我是在使用你的代码时发现的。但是也感谢您在这里进行了更改是的，我注意到您有一个无状态组件，但在我第一次回答时忘了取下
this
。