Блог

Главная - Вопросы по программированию - Цикл массива строк, которые будут использоваться для идентификатора элемента

Цикл массива строк, которые будут использоваться для идентификатора элемента

#javascript #reactjs

#javascript #reactjs

Вопрос:

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

Учитывая код:

 componentDidMount() {
  var IDs = ['ID1', 'ID2']
  for(var x=0; x < IDs.length; x  ) {
    const thisID = document.getElementById(IDs[x])
    thisID.style.opacity = '0'
  }
}

Я все делаю правильно или, возможно, что-то упускаю? Спасибо.

Комментарии:

1. В чем ваша проблема?

2. Вы захотите применить идентификаторы или стили по идентификатору в возвращаемом jsx компонента. Вы не хотите вручную изменять DOM в React.

Ответ №1:

Вы предоставили мало информации. Может быть, это поможет

 let IDs = ['ID1', 'ID2'];

IDs.forEach(function(number) {
    console.log(number);
  let div = document.getElementById(number); //javascript
  // or use jquery 
  // const thisID = $(`#{number}`) //jquery 
  div.style.opacity = '0';
});

// or use jQuery 

let IDjQuery = ['ID4', 'ID5'];

IDjQuery.forEach(function(number) {
  console.log(number);
  let divjQuery = $(`#${number}`); //jQuery 
  divjQuery.css('opacity', '0');
}); 
 <div id="ID1">Test 1</div>
<div id="ID2">Test 2</div>
<div id="ID3">Test 3</div>
<!-- or use jQuery  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ID4">Test 4</div>
<div id="ID5">Test 5</div>
<div id="ID6">Test 6</div>

Ответ №2:

Если вы используете react , вы должны сделать аналогично этому,

 export default function App() {
  const elements = [
    { id: 1001, label: "Orange" },
    { id: 1002, label: "Apple" },
    { id: 1003, label: "Banana" }
  ];
  const selectedDiv = [1001];
  return (
    <div className="App">
      <h1>List</h1>
      {elements.map((v) => (
        <div style={{ opacity: selectedDiv.includes(v.id) ? "0" : "1" }}>
          {v.label}
        </div>
      ))}
    </div>
  );
}

Рабочий код: — https://codesandbox.io/s/prod-brook-buyyl?file=/src/App.js:51-464

Метки: ,