如何为上一个/下一个按钮 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

为了回答您的第一个问题，我刚刚制作了两个非常简单的functional components ，分别称为 Prev 和 Next。它们在 Main 组件的渲染函数（旧按钮所在的位置）中渲染。如您所见，适当的函数和值作为道具传递。

问题 2

如您所见，大部分代码已从这些函数中删除。为了确定该按钮应该启用还是禁用，我使用了strict equality 和strict inequality。这是基于索引是最小值 (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>