Сопоставление другого значка в зависимости от значения свойства в React - PullRequest
Новая
       7

Сопоставление другого значка в зависимости от значения свойства в React

0 голосов
/ 11 декабря 2018

https://codesandbox.io/s/r546o8v0kq

Моя песочница, представленная выше, показывает базовое отображение массива элементов.Это формирует список заметок, дат и значка в зависимости от того, какой это элемент.

Я работаю с некоторой логикой, которая отображает каждый элемент, чтобы выяснить, какое это значение, на основании того, что я присваиваю значение строке для завершения типа шрифта. Удивительный логотип. 

const noteType = _.uniq(notes.map(value => value.intelType));
const noteIcon = [
  `${noteType}`.toUpperCase() == "EDUCATION"
    ? "paper-plane"
    : `${noteType}`.toUpperCase() == "ELIGIBILITY"
    ? "heart"
    : `${noteType}`.toUpperCase() == "GENERAL"
    ? "twitter"
    : null
];

Если «intelType» имеет значение «education», он возвращает строку «paper-plane» для завершения иконки.например, fa fa-${noteIcon}

    <List>
      {notes.map((note, index) =>
        note !== "" ? (
          <React.Fragment>
            <ListItem className="pl-0">
              <i class={`fa fa-${noteIcon}`} aria-hidden="true" />
              <ListItemText
                secondary={moment(note.createdAt).format("DD-MMM-YYYY")}
              />
            </ListItem>
            <p>{note.note}</p>
            <Divider />
          </React.Fragment>
        ) : null
      )}
    </List>

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

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Вам нужно получить значок на карте для каждого note.intelType.Поскольку вы передаете массив идентификаторов, ни один из значков не совпадает, и в результате всегда получается null.

. Простое решение - создать Map типов для значков.(iconsMap) и получите значок с карты, используя note.intelType.

кстати - в настоящее время note.intelType мы всегда в верхнем регистре, поэтому вам не нужно преобразовывать его.

песочница 

const iconsMap = new Map([
  ['EDUCATION', 'paper-plane'],
  ['ELIGIBILITY', 'heart'],
  ['GENERAL', 'twitter'],
]);

class Notes extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { notes, classes } = this.props;

    return (
      <React.Fragment>
        <List>
          {notes.map((note, index) =>
            note !== "" ? (
              <React.Fragment>
                <ListItem className="pl-0">
                  <i class={`fa fa-${iconsMap.get(note.intelType)}`} aria-hidden="true" />
                  <ListItemText
                    secondary={moment(note.createdAt).format("DD-MMM-YYYY")}
                  />
                </ListItem>
                <p>{note.note}</p>
                <Divider />
              </React.Fragment>
            ) : null
          )}
        </List>
      </React.Fragment>
    );
  }
}
0 голосов
/ 11 декабря 2018

Я не уверен, что происходит с этим битом кода: 

const noteIcon = [
  `${noteType}`.toUpperCase() == "EDUCATION"
    ? "paper-plane"
    : `${noteType}`.toUpperCase() == "ELIGIBILITY"
    ? "heart"
    : `${noteType}`.toUpperCase() == "GENERAL"
    ? "twitter"
    : null
]

Но для меня имеет больше смысла хранить эту информацию в виде объекта и затем обращаться к типу значков таким образом. 

const icons = {
    EDUCATION: 'paper-plane',
    ELIGIBILITY: 'heart',
    GENERAL: 'twitter'
}

А потом идет: 

icons[noteType]
0 голосов
/ 11 декабря 2018

Вы можете определить объект, который отображает тип intel на имена значков: 

const noteIconMap = 
      { "EDUCATION": "paper-plane",
        "ELIGIBILITY": "heart",
        "GENERAL": "twitter",
      };

И посмотрите его таким образом внутри рендера: 

<i class={`fa fa-${noteIconMap[note.intelType.toUpperCase()]}`} aria-hidden="true" />

Хотя, будьте осторожны, если естьэто случай, когда note может иметь intelType undefined, toUpperCase вызов вызовет ошибку.

Вот ссылка на работающую измененную песочницу: https://codesandbox.io/s/ojz2lzz03z

...