Question

我将4页的内容组件存储在一个数组中。我想在点击下一个按钮（在页脚组件中）之后，页面布局将呈现数组中的下一个内容组件，是否有人对此有所了解？

非常感谢！这是我的文件

**** Content.jsx ****
import React from 'react';

import Start from './Start.jsx';
import Time from './Time.jsx';
import Information from './Information.jsx';
import End from './End.jsx';

export default class Content extends React.Component {
    render(){
        const Contents = [ <Start />, <Time />, <Information />, <End /> ];

        return (
            <div className="container">
                <div className="row">
                    {Contents[0]}
                </div>
            </div>
        );
    }
};

**** Footer.jsx ****
import React from 'react';

import Content from './Content.jsx';

export default class Footer extends React.Component {

    render(){
        const button = {
            margin: "10em 1em 0 1em"
        };
        return (
            <div className="row">
                <div className="col-sm-offset-5 col-sm-2 text-center">
                    <button className="btn btn-secondary" style={button}>Back</button>
                    <button className="btn btn-success" style={button}>Next</button>
                </div>
            </div>
        )
    }
}

Answer 1

In parent component of both Content and Footer add a method setActiveContent.

class Parent extends React.component {
  constructor(props) {
    super(props);
    this.state = {
       activeContent: ''
    }
  }
  setActiveContent(contentId) {
    this.setState({
        activeContent: this.state.activeContent + contentId
    });
  }

  render(){
     <div>
       <Content activeContent={this.state.activeContent}/>
       <Footer setActiveContent={this.setActiveContent}/>
  }
}


export default class Footer extends React.Component {

    handleClick() {
      this.props.setActiveContent(1);
    }
    render(){
        const button = {
            margin: "10em 1em 0 1em"
        };
        return (
            <div className="row">
                <div className="col-sm-offset-5 col-sm-2 text-center">
                    <button className="btn btn-secondary" style={button}>Back</button>
                    <button onClick={this.handleClick} className="btn btn-success" style={button}>Next</button>
                </div>
            </div>
        )
    }
}



export default class Content extends React.Component {
    render(){
        const Contents = [ <Start />, <Time />, <Information />, <End /> ];

        return (
            <div className="container">
                <div className="row">
                    {Contents[this.props.activeContent]}
                </div>
            </div>
        );
    }
};

Answer 2

你想拥有一个数组位置来知道要转换的内容。

所以在您的页脚中，您想知道索引是什么，并且您希望将click事件传递给父组件来处理数据传输

export default class Footer extends Component {
    viewNext(e){
        e.preventDefault();
        this.props.setContent(this.props.currentIndex + 1);
    }
    viewPrevious(e){
        e.preventDefault();
        this.props.setContent(this.props.currentIndex - 1);
    }
    render(){
        const button = {
            margin: "10em 1em 0 1em"
        };
        return (
            <div className="row">
                <div className="col-sm-offset-5 col-sm-2 text-center">
                    <button className="btn btn-secondary" style={button} onClick={this.viewPrevious.bind(this)}>Back</button>
                    <button className="btn btn-success" style={button} onClick={this.viewNext.bind(this)}>Next</button>
                </div>
            </div>
        )
    }
}

现在，当您渲染页脚时，您希望传递相对信息

class App extends Component {
    constructor(props){
        super(props);
        this.state = {currentIndex: 0};

        this.setContent = this.setContent.bind(this);
    }
    setContent(index){
        this.setState({currentIndex: index});
    }
    render(){
        let {currentIndex} = this.state;
        return (
            <div>
                <Content currentIndex={currentIndex}/>
                <Footer setContent={this.setContent} currentIndex={currentIndex}/>
           </div>
        )
    }
}

最后在内容组件中，您需要接受此索引并使用它

export default class Content extends Component {
    constructor(props){
        super(props);
        this.componentsArr = [ <Start />, <Time />, <Information />, <End /> ]; // I moved this array to the constructor so this way you aren't creating it every single render. just need to make it once.
    }
    render(){
        const ViewComponent = this.componentsArr[this.props.currentIndex];
        return (
            <div className="container">
                <div className="row">
                    {ViewComponent}
                </div>
            </div>
        );
    }
}

所以这里有一些功课。查看下一个组件或上一个组件时添加验证。意味着当您查看最后一个组件（<End />）并单击下一个按钮时会发生什么？提示：您还需要将componentsArr逻辑移动到App并将其长度传递给页脚以进行索引位置。

ReactJS通过点击事件通过一系列内容组件更改页面内容

2 个答案: