web-dev-qa-db-fra.com

Comment concaténer deux fragments ou variables JSX ou une chaîne et un composant (dans Reactjs)?

Je sais que JSX peut être très trompeur car il ressemble à des chaînes et ce n'est pas le cas, d'où le terme "chaîne" dans la question, même si nous ne manipulons pas vraiment les chaînes.

Voici un exemple de code (faux, évidemment):

let line = <Line key={line.client_id} line={line}/>;
if(line.created_at) {
    return <div className="date-line"><strong>{line.created_at}</strong></div> + line;
} else {
    return chat_line;
}

J'ai une ligne, et je veux "concaténer" quelques divs devant elle sous certaines conditions. Quelle serait la syntaxe appropriée? J'ai essayé les parenthèses, les parenthèses et le signe plus ... Aucun d'entre eux ne semble fonctionner ...

merci

reactjsconcatenationjsx
24
Sephy

Utilisez des tableaux:

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return [
    <div key="date" className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent,
  ];
} else {
  return chat_line;
}

Ou utilisez des fragments:

import createFragment from "react-addons-create-fragment";

let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
  return createFragment({
    date: <div className="date-line"><strong>{line.created_at}</strong></div>,
    lineComponent: lineComponent,
  });
} else {
  return chat_line;
}

Dans les deux cas, vous devez fournir les clés pour React. En cas de tableau, vous définissez la clé directement sur l'élément. Concernant les fragments, vous fournissez des paires clé: élément.

REMARQUE: lors du retour de la méthode render, vous ne pouvez renvoyer qu'un seul élément, ou NULL. Les exemples fournis ne sont pas valides dans ce cas.

42
Andreyco

Pour React Native, je préfère cette technique:

  1. pro: contrairement à la technique de tableau, vous n'avez pas à créer artificiellement des clés
  2. con: nécessite la surcharge d'un élément conteneur (par exemple, View, below)
jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;
10
Pete Alvin

Vous pouvez utiliser des balises vides, je veux dire, <> et </>, chaque fois que vous ne voulez tout simplement pas Container-Element (par exemple. <View>), comme ci-dessous:

  render() {
    return (
      <>
        <Text>First</Text>

        <Text>Second</Text>
      </>
    );
  }

Exemple:

import React from 'react'
import { View, Text } from 'react-native'

import Reinput from 'reinput'

export default class ReinputWithHeader extends Reinput {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <View style={{backgroundColor: 'blue', flexDirection: 'row', alignSelf: 'stretch', height: 20}}>
          <Text>Blue Header</Text>
        </View>

        {super.render()}
      </>
    );
  }
}

Remarque: j'ai testé et cela fonctionne sur react-native aussi; voir aussi Fragments .

Aperçu:

enter image description here

2
Top-Master

Si vous êtes d'accord avec un objet parent tel qu'un autre div, vous pouvez également le faire de cette façon:

let line = <Line key={line.client_id} line={line}/>;
if(line.created_at) {
    return <div><div className="date-line"><strong>{line.created_at}</strong></div>{line}</div>;
} else {
    return chat_line;
}
1
kojow7