Comment passer des éléments facultatifs à un composant comme un accessoire dans reactjs

J'essaie de trouver le bon "réagir" pour passer à une option prop qui est un Élément d'un conteneur de composant, qui est géré différemment des enfants de la composante.

Pour un exemple simple, j'ai un composant du Panneau, ce qui rend ses enfants, qui a aussi une option "titre" prop (qui est un élément plutôt qu'une chaîne, pour le bien de l'exemple) qui est spécialement rendu (mettez-les dans un endroit spécial, avec des comportements spéciaux dans tout en maintenant l'abstraction.

Une option est d'avoir un composant qui est sorti des enfants et rendu spécialement:

<Panel>
   <Title> some stuff</Title>
   <div> some other stuff</div>
</Panel>

Mais il semble bizarre d'avoir des enfants extraits et traités séparément comme ça.

Comment est-ce normalement traitée à réagir, et je suis même de penser à ce la bonne manière

OriginalL'auteur Zak Kus | 2015-11-10

6

Vous n'avez pas besoin de faire quelque chose de spécial. Il suffit de passer le titre de la composante comme un accessoire, et ensuite utiliser {this.props.title} partout où vous voulez qu'il soit rendu:
```
class Panel extends React.Component {
  render() {
    return <div>
      {this.props.title}
      <div>Some other stuff...</div>
    </div>;
  }
}

class App extends React.Component {
  render() {
    var title = <Title>My Title</Title>;
    return <Panel title={title}/>;
  }
}
```
Si vous ne passez pas d'une quelconque valeur pour le title prop (ou si la valeur est false, null, ou undefined) alors rien ne sera rendus là.

C'est un motif assez commun à Réagir.

pouah, merci. J'étais coincé dans cette vue que "title={titre}" doit être un type primitif.
Est-il un commun réagir motif (ou même possible) de restreindre le titre propType être un vrai Titre de composant?

OriginalL'auteur Jordan Running
3

vous pouvez faire quelque chose comme ceci
```
render(){
    <div>
        {this.props.title ? this.props.title : null}
        {this.props.children}
    </div>
}
```
fondamentalement, si vous passez un élément de titre comme un accessoire, puis créer un élément et de le rendre. d'autre vient de mettre à null...

pour le créer, vous feriez quelque chose comme ça.
```
<Panel title={<Title>Something Here</Title>}
    <div> something here</div>
</Panel>
```
C'est en général de savoir comment réagir si la poignée en option composants enfants

OriginalL'auteur John Ruddell
1

Lorsque vous avez besoin d'un attribut à partir de votre option prop, vous aurez à vérifier d'abord si le prop a été livré. Sinon, vous obtiendrez un:
```
TypeError: Cannot read property 'yourPropProperty' of undefined
```
Conditionnelle contexte de rendu (en fonction de mon facultatif this.props.ignore tableau), ce ne travail:
```
{!this.props.ignore.includes('div')) && (
   <div>
      Hey
   </div>
)}
```
Au lieu de cela, vous devriez faire:
```
{(!this.props.ignore || !this.props.ignore.includes('div'))) && (
   <div>
      Hey
   </div>
)}
```
OriginalL'auteur Franco Méndez
0

Une chose que vous pouvez faire est d'avoir par défaut des accessoires (généralement initialisé à un no-op) pour votre composant.

Par exemple, si vous souhaitez disposer en option d'une fonction prop:
```
class NewComponent extends React.Component {
    ...
    componentDidMount() {
        this.props.functionThatDoesSomething()
    }
}

NewComponent.defaultProps = {
    functionThatDoesSomething: () => {}
}
```
De cette façon, les composants parents peuvent choisir de passer la fonction prop ou pas et que votre application ne plante pas parce que

.accessoires de jeu.functionThatDoesSomething n'est pas une fonction
.

OriginalL'auteur Taiwosam

Vous devez vous connecter pour publier un commentaire.