Как создать отдельный компонент для кнопок «предыдущий / следующий» ReactJS

Question

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

Мои вопросы:

1. как отделить эти кнопки от отдельногокомпонент
2. как я могу улучшить функции "переключения" для этих кнопок

// my profiles.json
let profiles = [{"name":"John"}, {"name":"Kitty"}, {"name":"Ji"}, {"name":"Mattis"}]

class Profile extends React.Component {
  render() {
    return (
      <div>
         <h1>{this.props.name}</h1>
      </div>
    )
  }
}

class Main extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      index: 1,
      disabledNext: false,
      disabledPrev: false
    }
  }
  togglePrev(e) {
    let index = this.state.index - 1
    let disabledPrev = false
    if (index <= 0) {
      e.preventDefault()
      index = 0
      disabledPrev = true
    }

    this.setState({ index: index, disabledPrev: disabledPrev, disabledNext: false })
  }

  toggleNext(e) {
    let index = this.state.index + 1
    let disabledNext = false
    if (index === this.props.profiles.length - 1) {
      e.preventDefault()
      index = this.props.profiles.length - 1
      disabledNext = true
    }

    this.setState({ index: index, disabledNext: disabledNext, disabledPrev: false })
  }
  render() {
    const { index, disabledNext, disabledPrev } = this.state
    const profile = this.props.profiles ? this.props.profiles[index] : null
    if (profile) {
      return (
       <div className='profile'>
          <div>
            <button onClick={this.togglePrev.bind(this)} disabled={disabledPrev}>Prev</button>
            <button onClick={this.toggleNext.bind(this)} disabled={disabledNext}>Next</button>
          </div>
          <Profile {...profile} />
       </div>
      )
    } else {
      return <span>error</span>
    }
  }
}

const App = () => (
  <div>
    <Main profiles={profiles} />
  </div>
)

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

Вопрос 1

Чтобы ответить на ваш первый вопрос, я только что сделал два очень простых функциональных компонента , названных Prev и Next.Они отображаются в функции рендеринга основного компонента (там, где были старые кнопки).Как видите, соответствующие функции и значения передаются как реквизиты.

Вопрос 2

Как видите, большая часть кода была удалена из этих функций.Чтобы определить, должна ли кнопка быть включена или отключена, я использовал строгое равенство и строгое неравенство .Это основано на индексе, являющемся минимальным (0) или максимальным значением (количество элементов в массиве).

Я также преобразовал компонент Profile в функциональный компонент, просто для удовольствия.

Надеюсь, это поможет!

// my profiles.json
let profiles = [{"name":"John"}, {"name":"Kitty"}, {"name":"Ji"}, {"name":"Mattis"}]

class Main extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      index: 1,
      disabledNext: false,
      disabledPrev: false
    }
  }

  togglePrev(e) {
    let index = this.state.index - 1;
    let disabledPrev = (index === 0);

    this.setState({ index: index, disabledPrev: disabledPrev, disabledNext: false })
  }

   toggleNext(e) {
     let index = this.state.index + 1;
     let disabledNext = index === (this.props.profiles.length - 1);

     this.setState({ index: index, disabledNext: disabledNext, disabledPrev: false })
   }

   render() {
     const { index, disabledNext, disabledPrev } = this.state
     const profile = this.props.profiles ? this.props.profiles[index] : null
     
     if (profile) {
       return (
         <div className='profile'>
           <div>
             <Prev toggle={(e) => this.togglePrev(e)} active={disabledPrev} />
             <Next toggle={(e) => this.toggleNext(e)} active={disabledNext} />
           </div>
           <Profile {...profile} />
         </div>
       )
     } else {
       return <span>error</span>
     }
  }
}

function Prev(props) {
  return (
    <button onClick={props.toggle} disabled={props.active}>Previous</button>
  );
}

function Next(props) {
  return (
    <button onClick={props.toggle} disabled={props.active}>Next</button>
  );
}

function Profile(props) {
  return (
    <div>
       <h1>{props.name}</h1>
    </div>
  );
}

const App = () => (
  <div>
    <Main profiles={profiles} />
  </div>
)

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>