Как объединить два фрагмента JSX или переменные или строку и компонент (в Reactjs)?

Я знаю, что JSX может быть очень вводящим в заблуждение, потому что он выглядит как строки, и это не так, поэтому термин "строка" в вопросе, даже если мы на самом деле не манипулируем строками.

вот пример кода (не так, конечно):

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;
}

У меня есть строка, и я хочу "сцепить" некоторые divs перед ней при определенных условиях. Каков будет правильный синтаксис? Я пробовал скобки, скобки, плюс знак... Ни один из них, похоже, работа...

спасибо

12
concatenation jsx reactjs

3 ответов

использовать массивы:

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;
}

или использовать фрагменты:

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;
}

в обоих случаях, вы должны предоставить ключи для React. В случае array вы устанавливаете key непосредственно на element. Что касается фрагментов, вы предоставляете пары key: element.

Примечание.: при возвращении из render метод, вы можете возвращать только один элемент, или NULL. приведенные примеры недопустимы в этом случае.

25

для React Native я предпочитаю эту технику:

  1. pro: в отличие от техники массива вам не нужно искусственно создавать ключи
  2. con: требуется накладные расходы содержащего элемента (например, View,ниже)
jsx = <Text>first</Text>;
jsx = <View>{jsx}<Text>second</Text></View>;
6

Если вы хорошо используете родительский объект, такой как другой div, вы также можете сделать это следующим образом:

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