Как рендерить по три элемента каждый раз? Реагировать

Я хочу визуализировать каждый раз только три элемента моего массива numbers.

Каждый раз, когда я нажимаю em next, чтобы изменить числа.

например: На экране: 123, я нажал кнопку, появится, 456 и далее.

MyCode:

class Contador extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      elementsPerPage:3,
      currentPage:0,
      numbers:[1,2,3,4,5,6,7,8,9,10]
    };

    this.nextPage = this.nextPage.bind(this);
  }
  
  nextPage () {
   this.setState({ currentPage: this.state.currentPage + 1 });
    console.info(this.state.currentPage)  
  }
  
  elementsOnScreen () {
    this.state.numbers.map((number)=>
      <li>{number}</li>)
  }
  
  render() {
    return (
      <div>
        <h1>Elements: {this.elementsOnScreen} </h1>
      <h1>Current Page: {this.state.currentPage}</h1>
      <button onClick = {this.nextPage}> next </button>
        </div>
    );
  }
}

ReactDOM.render(
<Contador/>,
  document.getElementById('root')
)

<div id = "root"></div>

reactjs

30.03.2018 03:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

139

Ответы 2

Вы можете использовать Array.prototype.slice ():

elementsOnScreen () {
  const { currentPage, numbers, elementsPerPage } = this.state;
  return numbers
    .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage + 1)
    .map(number => (<li>{number}</li>));
}

30.03.2018 03:50

Используйте метод среза, чтобы извлечь три элемента из this.state.numbers и сопоставить их с помощью функции карты.

elementsOnScreen () {
 const { currentPage, numbers, elementsPerPage } = this.state;
 return numbers
  .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage)
  .map(number => (<li>{number}</li>));
}

также, когда вы визуализируете функцию внутри jsx, вы должны вызывать функцию, а не передавать ее значение

<h1>Elements: {this.elementsOnScreen()} </h1>

this.elementsOnScreen передаст функцию, но не запустит ее. Чтобы запустить функцию и вернуть ее значения, вам необходимо выполнить this.elementsOnScreen().

30.03.2018 04:11

Другие вопросы по теме

React Native, Redux: магазин не найден

Ошибка регистрации Service Worker: неподдерживаемый тип MIME ('text / html')

Reactjs перезапускает видео при нажатии аудиоплеера

Условный встроенный стиль с помощью React Native

В React, как установить флажок ввода в зависимости от значения объекта

Установка состояния на пустую строку не вызывает у меня повторного рендеринга?

Как предотвратить бесконечный цикл в создателе цикла while?

HOC Redux Dispatch вызывается после вызова дочернего компонента React componentDidMount

JestJS: Как проверить значение состояния в catch ()

Uncaught TypeError: невозможно прочитать значение свойства null в React

Как рендерить по три элемента каждый раз? Реагировать

Ответы 2

Другие вопросы по теме

Похожие вопросы