Как генерировать Компонент в л oop с использованием реагировать родной?

Question

Я хотел бы знать, как я могу генерировать компоненты из переменной, которая хранит массив строк, с al oop (или чем-то подобным). Например, у меня есть массив:

const arr = ['Hello', 'Awesome', 'Stack','Over','Flow', 'Have', 'A', 'Nice', 'Day'];

, и я написал этот метод:

function renderT() {
  return arr.map(obj => {
    <Text>{obj}</Text>;
  });
}

, и затем я вызываю его в операторе return моего render() метода:

return (
  <View style={styles.row}>{renderT()}</View>
)

В результате у меня нет ошибок или текста на экране. Я пытался использовать разные типы l oop for, forEach, map, и это не сработало. Не могли бы вы указать мне или предложить мне правильный путь, как я могу это реализовать?

Answer 1

Ваша map функция на arr ничего не возвращает, поэтому вы не видите никаких текстов.

Попробуйте заменить вашу функцию renderT() на:

function renderT() {
  return arr.map(obj => (<Text>{obj}</Text>));
}

(просто замените {} вокруг значения <Text /> на ())

Answer 2

Есть некоторые тонкости, о которых следует знать, что если их пропустить, это приведет к ошибкам и / или неожиданному поведению. Рассмотрите следующие корректировки в своем коде, которые должны учитывать ошибки времени выполнения:

function renderT() {

  // Ensure arr is defined in scope of, or is "visible" to, renderT()
  const arr = ['Hello', 'Awesome', 'Stack','Over','Flow', 'Have', 'A', 'Nice', 'Day'];

  return arr.map((obj, index) => {
    // Compose a unique key for the text element. A unique key is need when 
    // rendering lists of components
    const key = index;

    // Add return to ensure the text element is returned from map callback
    return <Text key={key}>{obj}</Text>;
  });
}

Что-то, о чем следует знать, это key prop - это должно быть предоставлено для компонентов, которые отображаются в списке (ie, <Text> в вашем случае).

Причина необходимости key опоры подробно здесь . Каждый key для каждого отображаемого элемента должен быть уникальным - как правило, следует избегать использования index обратного вызова сопоставления, однако увидеть уникальность значений в arr невозможно, будет необходимо .

Надеюсь, это поможет!

Answer 3

Вы должны заменить

function renderT() {
  return arr.map(obj => {
    <Text>{obj}</Text>;
  });
}

на это:

function renderT(arr) {
  return arr.map(obj => {
    return <Text>{obj}</Text>;
  });
}

и это:

return (
  <View style={styles.row}>{renderT()}</View>
)

на это:

return (
  <View style={styles.row}>{renderT(arr)}</View>
)

Две ошибки: отсутствующий возврат и отсутствующий аргумент в вашей функции renderT. Затем вы должны вызвать вашу функцию с правильным аргументом (ваш массив).