Как добавить изображение к одному из лучших пользователей в списке (таблица лидеров) с помощью create-реагировать на приложение? - PullRequest
Новая
       7

Как добавить изображение к одному из лучших пользователей в списке (таблица лидеров) с помощью create-реагировать на приложение?

0 голосов
/ 19 ноября 2018

Я сделал таблицу лидеров. Я хочу добавить золотую звезду в топ 1 пользователя. Остальные не должны ничего получать. Но если есть более одного пользователя с одинаковыми очками, то лучшие игроки должны получить звезду. 

render() {
    const { data } = this.props;

    return (
      <ListGroup>
        {data.map((user, index) => (
          <ListGroupItem key={index}>
            <b>
              {user.name} <span style={{ float: "right" }}>{user.total_points}</span>
            </b>
          </ListGroupItem>
        ))}
      </ListGroup>
);

Это отсортировано в бэкэнде, теперь я хочу попробовать добавить маленькую картинку в плеер сверху, остальное ничего не должно получить. Скажем:

Пользователь 1 - 20 баллов Пользователь 2 - 20 баллов Пользователь 3 - 19 баллов

Чем пользователь 1 и пользователь 2 получают звезду. Как я могу это сделать?

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Так как он отсортирован, лучший игрок с индексом 0.

Так 

render() {
    const { data } = this.props; 

    return (
      <ListGroup>
        {data.map((user, index) => (
          <ListGroupItem key={index}>
            {index === 0 && <Image src={user.profile_image} rounded />}
            <b>
              {user.name} <span style={{ float: "right" }}>{user.total_points}</span>
            </b>
          </ListGroupItem>
        ))}
      </ListGroup>
);

Если может быть много лучших игроков (лучший результат), проверьте это, чтобы решить, показывать ли изображение 

render() {
    const { data } = this.props;
    // since it is sorted, first user contains the max score as well
    // so we extract it for later comparisons 
    const maxScore = data.length ? data[0].total_points : 0;

    return (
      <ListGroup>
        {data.map((user, index) => (
          <ListGroupItem key={index}>
            {user.total_points===maxScore && <Image src={user.profile_image} rounded />}
            <b>
              {user.name} <span style={{ float: "right" }}>{user.total_points}</span>
            </b>
          </ListGroupItem>
        ))}
      </ListGroup>
);
0 голосов
/ 19 ноября 2018

Просто используйте условный рендеринг (https://reactjs.org/docs/conditional-rendering.html)

render() {
    const { data } = this.props;

    return (
      <ListGroup>
        {data.map((user, index) => (
          <ListGroupItem key={index}>
            {index === 0 && <img src="star.png" alt="" />}
            <b>
              {user.name} <span style={{ float: "right" }}>{user.total_points}</span>
            </b>
          </ListGroupItem>
        ))}
      </ListGroup>
);

Этого достаточно, чтобы отобразить изображение, тогда вы сами можете оформить его в соответствии с вашими потребностями

Для учета связей вы можете сделать как 

render() {
    const { data } = this.props;

    return (
      <ListGroup>
        {data.map((user, index, fullArray) => (
          <ListGroupItem key={index}>
            {user.score === fullArray[0].score && <img src="star.png" alt="" />}
            <b>
              {user.name} <span style={{ float: "right" }}>{user.total_points}</span>
            </b>
          </ListGroupItem>
        ))}
      </ListGroup>
);
...