prüfen reagieren, wenn Element leer

Question

Ich will nicht, um den Titel machen, wenn Beschreibung

var description = <MyElement />; // render will return nothing in render in some cases 

if (!description) { // this will not work because its an object (reactelement) 
    return null; 
} 

<div> 
    {title} 
    {description} 
</div> 

leer Was ist der richtige Weg, statt! Beschreibung Wenn es leer zu überprüfen?

Answer 1

var description, title; 

if (this.props.description) { 
    description = <Description description={this.props.description} />; 

    if (this.props.title) { 
     title = <Title title={this.props.title} />; 
    } 
} 

<div> 
    {title} 
    {description} 
</div> 

Oder einfach:

render() { 
    const { description, title } = this.props; 

    return (
    <div> 
     {title && description && <Title title={title} />} 
     {description && <Description description={description} />;} 
    </div> 
); 
} 

Imo ist es besser Praxis, dass, wenn Ihre Beschreibung Element dann nicht erforderlich ist, es nicht gemacht wird, anstatt Rückkehr null in es machen. Da würdest du die Daten wahrscheinlich durch eine Requisite schicken. Und wenn Sie diese Komponente überhaupt nicht rendern möchten, dann sollte das im Elternteil geschehen.