Блог

Главная - Вопросы по программированию - Отреагируйте, вставьте оболочку для последних двух элементов в цикл

Отреагируйте, вставьте оболочку для последних двух элементов в цикл

#javascript #reactjs #loops #react-hooks #mapping

Вопрос:

У меня есть список из 5 элементов

 const numbers = [1, 2, 3, 4, 5];

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Как я могу добавить контейнер div, обертывающий два последних элемента списка?

Результат должен измениться с

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Для

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div>
        <li>4</li>
        <li>5</li>
    </div>    
</ul>

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

1. Да, я прокомментировал ваш ответ, почему я не могу его принять

Ответ №1:

Вам нужно будет использовать index и иметь для этого условие:

Что-то вроде этого:

 const numbers = [1, 2, 3, 4, 5];

function NumberList(props) {
  const numbers = props.numbers;
  const firstList = numbers
    .slice(0, numbers.length - 2)
    .map(number => <li key={number.toString()}>{number}</li>);
  const lastList = numbers
    .slice(-2)
    .map(number => <li key={number.toString()}>{number}</li>);
  return (
    <ul>
      {firstList}
      <div>{lastList}</div>
    </ul>
  );
}

Или немного чище в этом живом фрагменте:

 function App() {
  function NumberList(props) {
    const numbers = [1, 2, 3, 4, 5];
    const firstList = numbers
      .slice(0, numbers.length - 2)
      .map(number => <li key={number.toString()}>{number}</li>);
    const lastList = numbers
      .slice(-2)
      .map(number => <li key={number.toString()}>{number}</li>);
    return (
      <ul>
        {firstList}
        <div>{lastList}</div>
      </ul>
    );
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {NumberList()}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

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

1. Спасибо, мой вопрос был о том, чтобы добавить div, обертывающий последние два элемента, ваш ответ заключается в том, что у последних двух элементов есть div, обертывающий их самих

Метки: ,