Я наткнулся на фрагмент кода, который решил важную для меня проблему. Существует множество способов повторного использования этого кода, но в этом примере наша цель — отображать смайлик на каждые 10 «лайков» поста.
Давайте представим, что пост набрал 50 лайков. Это означает, что нам нужно отобразить 5 смайликов рядом с ним. Мы также хотим сделать этот код динамическим, чтобы количество эмодзи менялось в зависимости от количества лайков, которые получает каждый пост.
Сначала я знал, как динамически отображать количество отметок "Нравится", которые получил пост
И я, очевидно, знал, как отобразить смайлик рядом с количеством полученных им лайков
Чего я не знал в то время, так это как получить количество смайликов во втором ‹span›, чтобы динамически изменяться в зависимости от количества лайков, полученных постом?»
Я испробовал несколько разных способов сделать конечный результат примерно таким
и приведенное ниже решение все еще может работать для этого метода, если это желаемый результат.
Но в поисках этого ответа я нашел способ сделать конечный результат примерно таким
Чтобы получить количество смайликов, отображаемых в одной строке, и убедиться, что оно является динамическим, чтобы оно могло меняться в зависимости от количества лайков, получаемых любой публикацией, нам нужно каким-то образом получить количество лайков, чтобы «поговорить с» количество смайликов для отображения. Затем нам нужно найти способ отобразить такое же количество смайликов.
Вот немного псевдокода шагов, которые нам нужно предпринять…
- Доступ к количеству «лайков» поста
2. Создайте условия для количества лайков, чтобы показать, сколько эмодзи должно отображаться (10 лайков = 1 эмодзи).
3. Получите это количество эмодзи для динамического рендеринга в элемент JSX. (Это сложная часть)
Во-первых, мы должны иметь доступ к количеству отметок "Нравится", которое имеет публикация, с помощью реквизитов, отправляемых из родительских компонентов. Чтобы узнать больше об этом, ознакомьтесь с другой моей статьей.
Во-вторых, нам нужно создать условие, основанное на количестве отметок «Нравится» у поста, чтобы точно знать, сколько эмодзи нужно отображать.
const numOfEmojis = Math.floor( {props.likes} / 10)
Давайте разберем, что здесь происходит…
Мы берем количество «лайков», которое есть у поста, делим его на десять, а затем «уменьшаем» его так, чтобы это число округлялось в меньшую сторону до ближайшего целого числа.
В этом примере пост с 39 «лайками» должен иметь только 3 смайлика, поскольку он еще не достиг 40, но как только он получит следующий «лайк», должен отображаться 4-й смайлик.
Итак, в приведенном выше примере кода, если значение { props.likes } в настоящее время равно 39, мы должны разделить его на 10 (что составляет 3,9), а затем округлить до ближайшего целого числа (что это 3). Таким образом, в этом примере уравнения numOfEmojis === 3. Это также настроено на изменение всякий раз, когда изменяется значение { props.likes }.
Теперь, когда у нас есть динамический доступ к количеству эмодзи, которые мы хотим отобразить, нам нужно найти способ создать этот ‹span› с переданным в него этим количеством эмодзи.
Это забавная часть…
const emojiStr = [...Array(numOfEmojis)].map( ()=> "😊" ).join(‘’);
Используя конструктор Array() и передав одно число, мы можем создать массив с длиной числа, которое мы передали в аргумент (numOfEmojis). Это дает нам массив желаемой длины, в котором все элементы являются пустыми слотами.
При использовании оператора распространения в этом массиве всем этим пустым элементам массива присваивается значение undefined, и, таким образом, их можно переназначить нашему смайлику с помощью метода .map().
В довершение всего, мы используем метод .join() метод без пробелов ( ' ' ), передаваемых в качестве разделителя, который объединяет все смайлики в один одиночная строка.
Все это было присвоено переменной emojiStr, которая теперь позволяет динамически передавать ее в диапазон нашего элемента JSX.
Давайте применим это на практике шаг за шагом
Во-первых, использование конструктора Array само по себе дает массив пустых слотов, что не служит нашим целям должным образом.
Нам нужно взять тот массив, который был создан с помощью конструктора, и применить к нему оператор расширения, чтобы получить массив нужной длины, который также присваивает каждому элементу значение undefined. Имея это начальное значение undefined, давайте изменим его значение на наш смайлик 😊
Оттуда мы можем использовать метод .map(), чтобы изменить значение каждого элемента на «😊».
Затем мы можем использовать метод .join(), чтобы объединить их все в одну строку, которая присваивается переменной emojiStr, делая ее доступной в другом месте нашего кода.
Надеюсь, это поможет!
-Андрей
