如何为prev / next按钮ReactJS创建单独的组件

Question

我使用ReactJS创建了一个简单的应用程序。此应用程序是配置文件列表，为简单起见，在显示配置文件时，我只显示名称。 我添加了按钮来显示上一个和下一个配置文件，但我在主要组件中做了非常简单的方法。

我的问题：

1. 如何将此按钮与单独的组件分开
2. 我如何改善＆＃34;切换＆＃34;这些按钮的功能
＆＃13;
＆＃13;
// 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')
)
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

问题1

为了回答你的第一个问题，我刚刚制作了两个非常简单的functional components ，叫做Prev和Next。它们在主要组件的渲染功能（旧按钮所在的位置）中渲染。如您所见，适当的函数和值作为props传递。

问题2

如您所见，大多数代码都已从这些函数中删除。要确定是启用还是禁用该按钮，我使用了strict equality和strict inequality。这是基于索引是最小值（0）或最大值（数组中元素的数量）。

我还将Profile组件转换为功能组件，仅用于踢。

希望这有帮助！

＆＃13;

＆＃13;

// 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')
)

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;