在React中传递道具/调用函数

Question

我是React的新手，我希望能从其他组件传递道具/调用函数方面获得一些帮助。

这是我正在使用的：

使用switch语句导航以更改当前呈现的页面

import React, { Component } from 'react';
import './navigationStyling.css'

// import pages
import Homepage from '../../pages/Home/home'
import Artist from '../../pages/Artist/artist'
import Facilites from '../../pages/Facilities/facilities'
import Money from '../../pages/Money/money'
import AboutYou from '../../pages/AboutYou/AboutYou'
import Resume from '../../pages/Resume/resume'
import Goodbye from '../../pages/Goodbye/goodbye'

class Navigation extends Component {
    constructor(props){
        super(props)
        this.state = {
            step : 1
        }
    }

    nextStep(){
        this.setState({
            step : this.state.step + 1
        })
    }
    
    previousStep(){
        this.setState({
            step : this.state.step - 1
        })
    }

    render(){
        switch(this.state.step){
            case 1: 
                return <Homepage 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />  

            case 2: 
                return <Artist 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        /> 

            case 3: 
                return <Facilites 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        /> 

            case 4: 
                return <Money 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 5: 
                return <AboutYou 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 6: 
                return <Resume 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />

            case 7: 
                return <Goodbye 
                        nextStep={this.nextStep}
                        previousStep={this.previousStep}
                        />
        }
    }

    // saveValues(field_value, field){
        
    //     field = assign({}, field, field_value)
    //     .bind(this)()
    // }
        
}

export default Navigation;

一个页脚将在我的每个页面上显示，以调用Navigation.nextStep（）：

    class Footer extends Component{
    render(){
        return(
            <div>
                <button className="btn -primary pull-right" onClick={this.props.previousStep}>Previous</button>
                <button className="btn -primary pull-right" onClick={this.props.nextStep}>Next</button>
            </div>
        )
    }
}

export default Footer

Example on a page:

    class Homepage extends Component{
    render(){
        return(
            <React.Fragment>
                <h1>Homepage </h1>

                <Footer />
            </React.Fragment>
            )
    }
}

export default Homepage

单击按钮时没有任何反应，因此我认为状态不会接收任何事件或更新。所以我不确定如何传递道具或如何通过其他类调用函数。在java中我会做类似Navigation.nextStep（）的事情

Answer 1

你需要将nextStep和previousStep道具传递给Footer组件：

class Homepage extends Component{
    render(){
        return(
            <React.Fragment>
                <h1>Homepage </h1>
                <Footer 
                    nextStep={() => console.log("next step click") }
                    previousStep={() => console.log("previous step click") }
                />
            </React.Fragment>
        );
    }
}

您可以使用PropTypes来避免此类错误。它允许您指定组件期望的属性（类型，必需与否......），并在不满足时显示警告/错误。