Блог

У меня есть функция map, которая возвращает элементы из обратного вызова JSON в функциональном компоненте.

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

Без React.js , Я бы, вероятно, использовал документ, но я понимаю, что лучше всего использовать ссылку на переменную. Дело в том, что мой элемент доступен из строки и не имеет постоянного порядка. Что мне делать?

Пример для моего кода:

    let x = [{name: 'elephant', symbol: 'e'}, {name: 'rabbit', symbol: 'r'}];

   let mapped = x.map(x =>
        <button
            title={x.name} // <- I want only: [title="elephant"]
        >
            {x.symbol}
        </button>
    )

    React.useEffect(() => {
          
    }, [])
 

Вот как я бы использовал документ (нет React.js ):

 document.querySelector('button[title="elephant"]').style.color = 'green';
 

Есть много способов добиться этого, один из них — предварительно отфильтровать (может иметь несколько совпадений):

 let mapped = x
  .find((x) => x.name === "elephant")
  .map((x) => <button title={x.name} style={{color: 'green'}}>{x.symbol}</button>);
 

Вы также можете найти (для одного конкретного элемента), а затем использовать значение:

 let specific = x.find((x) => x.name === "elephant");

// Then use it
<button title={specific.name} style={{color: 'green'}}>{specific.symbol}</button>;
 

Это должно соответствовать вашим потребностям:

 <button
  title={x.name} // <- I want only: [title="elephant"]
  style={x.name === 'elephant' ? { color: 'green'} : {}}
>
  {x.symbol}
</button>
 

В качестве альтернативы, если вы хотите учесть возможность добавления стилей к объектам, отличным от elephant массива, рассмотрите этот шаблон.

 let x = [
  {name: 'elephant', symbol: 'e', color: 'green'},
  {name: 'rabbit', symbol: 'r', color: 'red'},
  {name: 'dog', symbol: 'd'},
];

let mapped = x.map(x =>
  <button
    title={x.name}
    style={x.color ? {color: x.color} : undefined}
  >
    {x.symbol}
  </button>
)