Erstellen eines bedingten Abschnitts in einer benutzerdefinierten Komponente "react"

Question

Ich erstelle eine benutzerdefinierte Komponente, die eine Container-Box rendert. Die Komponente sieht zunächst wie folgt aus:

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; 

Es zeigt eine div mit Klasse Feld, das die CSS enthält das Aussehen zu erzeugen und fühlen. Die inneren Divs mit Ausnahme von Box-Info sind bedingt. Manchmal wird diese Komponente mit einem Box-Titel verwendet und manchmal nicht. Gleiches passiert mit dem Boxboden.

Wenn ich es verwenden, würde ich so etwas wie dieses verwenden mag:

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

und manchmal wie folgt aus:

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

Wie kann ich die Stützen zu stellen für die Box zu ermöglichen, -title und box-bottom ausblenden, wenn ich showTitle = false oder showBottom = false verwende?

Vielen Dank im Voraus

Answer 1

Sie showTitle={false} es durch einfaches Weglassen schreiben kann. : ~)

Es gibt ein paar Möglichkeiten zu tun conditional rendering in React. Ein Ansatz ist

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

Wenn props.showTitle existiert, wird sie machen, was ist nach dem logischen && Operator.

Sie können auch den ternären Operator verwenden, wenn Sie etwas für den Fall machen wollen, dass die Bedingung nicht erfüllt ist, wie so

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

Als Nebennote, können Sie in prop-types suchen Sie nach der Art zu überprüfen, von props, dass Ihre Komponenten erhalten.

Answer 2

Es gibt eine dritte Option, die bei der Verwendung eines IIFE in der JSX Syntax besteht:

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