Реагировать на нативный рендер - PullRequest
Новая
       10

Реагировать на нативный рендер

0 голосов
/ 17 сентября 2018

Я хотел бы отобразить более многомерный массив, который выглядит следующим образом: 

const array = [
  {
      name: "Anna",
      items: ["Bread", "Cake", "Wine"]
  },
  {
      name: "John",
      items: ["Cucumber", "Pizza", "Jam"]
  }
]

Я пробовал это: 

class Example extends Component {
    render() {
        return (
            <View>
                {
                array.map((data) => { 
                  return(
                  <Text>{data.name}</Text>
                    {
                     data.items.map((item) => {
                        return (
                            <Text>{item}</Text>
                        );
                    }
                  );
                  }
                }
            </View>
        );
    }
}

Я также пытался поместить это вфункция, которую я рендеринг, но ни один не работает для меня, вы можете помочь?

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

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

class Example extends Component {
      _renderYYY(item) {
        console.log(item);
        return item.map((data) => {
          return (
            <View>
              <Text>{data}</Text>
            </View>
          );
        });
      }
      _renderXXX(array) {
        return array.map((data) => {
          return (
            <View>
              <Text key={data.name}>{data.name}</Text>
              {
                this._renderYYY(data.items)
              }
            </View>
          );
        });
      }
      render() {
        return (
          <View>
            {
              this._renderXXX(array)
            }
          </View>
        );
      }
    }
0 голосов
/ 17 сентября 2018

Вот это может помочь. 

class Example extends Component {
  renderData = (array) => (
    array.map((data, index) => ([
      <Text key={index}>{data.name}</Text>,
      this.renderItems(data.items)
    ])
  ))

  renderItems = (items) => (
    items.map((item, index) => (
      <Text key={`${item}${index}`}>{item}</Text>
    )
  ))

  render() {
    return (
        <View>
          {this.renderData(array)}
        </View>
    );
  }
}
0 голосов
/ 17 сентября 2018

Ограничением JSX является то, что у объекта JSX всегда должен быть один единственный корень.

То есть 

return (
  <Text>One</Text>
  <Text>Two</Text>
);

недействительно.

Вы должны обернуть возвращаемое значение внешней карты (включая внешнюю <Text> и внутренний результат .map()) корневым элементом (вероятно, <View>).

Дополнительно , вы всегда должны использовать key={} prop, и , чтобы дать ему глобально уникальное значение при рендеринге массива в JSX.

В общем, у меня было бы что-то вроде этого: 

class Example extends Component {
  render() {
    return (
      <View>
        {
          array.map((data) => (
            <View key={data.name}>
              <Text>{data.name}</Text>
              {
                data.items.map((item) => (
                  <Text key={data.name + item}>{item}</Text>
                ))
              }
            </View>
          ))
        }
      </View>
    );
  }
}

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

...