Как добавить в список с помощью Nextjs - PullRequest
Новая
       9

Как добавить в список с помощью Nextjs

0 голосов
/ 06 мая 2020

Как добавить к списку элементов в Next js?

Ссылаясь на документацию React, я получаю следующее: 

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Согласно этому, если бы я был чтобы добавить в массив чисел, например [1,2,3,4,5,6], тогда при повторном рендеринге потребуется снова отобразить весь список.

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

В идеале я хотел бы просто добавить в список js ошибок с document is not defined, когда я делаю getElementByClassNames или createElement, из-за SSR. 

export default () => {
  // when enter has been pressed, I should wrap the string with <li><li/> and append

  return (
    <>
      <input /> // input message here and append to the list when enter has been pressed
      <ul className="messages">
        { listofmessages }
      </ul>
    </>
  );
}

Как мне с этим справиться?

...