Question

我希望制作一个页面，该页面的顶部有一个工具栏，该工具栏确定了正文显示的页面。我设置了一个名为“ pageActive”的变量，该变量保存在App类的状态中。

父母是这个。

   class App extends Component {

        constructor(props) {
            super(props);

        this.state = {
            pageActive: 1,
        };

    }

    changePageActive = (newPage) => {
        this.setState( {pageActive: newPage});
    }

    render() {
        return (
            <div className="App">
                <LeagueToolbar pageActive={this.state.pageActive}/>
                <LeagueBody pageActive={this.state.pageActive}
                            changePageActive={this.changePageActive}/>
            </div>
        );
    }
}

export default App;

孩子是这个。

   class LeagueToolbar extends Component {

    constructor(props) {
        super(props);

        this.state = {
            menuPosition: null,
        };

    }

    handleClick = (event) => {
        this.setState({ menuPosition: event.currentTarget });
    }

    handleClose = () => {
        this.props.changePageActive(2); // does not work
        this.setState({ menuPosition: null });
    }

    render() {
        return (
            <div >
                <AppBar position="static">
                    <Toolbar>
                        <IconButton edge="start" color="inherit" aria-label="Menu"
                                    onClick={this.handleClick} >
                            <MenuIcon />
                        </IconButton>
                        <Menu
                            id="simple-menu"
                            anchorEl={this.state.menuPosition}
                            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                            getContentAnchorEl={null}
                            keepMounted
                            open={Boolean(this.state.menuPosition)}
                            onClose={this.handleClose}
                        >
                            <MenuItem onClick={this.handleClose}>League Summary</MenuItem>
                            <MenuItem onClick={this.handleClose}>History</MenuItem>
                            <MenuItem onClick={this.handleClose}>Admin</MenuItem>
                        </Menu>

                        <Typography variant="h6" >
                            {(function(){
                                switch(this.props.pageActive) { // does not work
                                    case 1:
                                        return <div>option1</div>;
                                    case 2:
                                        return <div>option2</div>;
                                }
                            })}
                        </Typography>

                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

export default LeagueToolbar;

因此，我将“ pageActive”作为属性传递给了孩子，但我无法读取其值。另外，我传递了函数“ changePageActive”，运行时它不是“函数”。我只是在学习React，我必须缺少一些基本知识，但我能发现的是变量“ pageActive”必须驻留在父对象上，而对其进行突变的函数也应该驻留。

Answer 1

错误是在LeagueToolbar的JSX中传递函数定义，这是解决方案：

getActivePage = () => {
        switch(this.props.pageActive) { 
            case 1:
                return <div>option1</div>;
            case 2:
                return <div>option2</div>;
            default: 
                return '';
    }

    <Typography variant="h6" >{this.getActivePage()}</Typography>

Answer 2

首先通过changePageActive={this.changePageActive}作为LeagueToolbar组件的道具

<LeagueToolbar pageActive={this.state.pageActive} changePageActive={this.changePageActive}/>

您还应该调用匿名函数，即在render方法中使用switch语句。由于您仅提供功能参考，因此无法使用。

还使用箭头功能绑定this。

即

{() => {
     switch(this.props.pageActive) { 
        case 1:
          return <div>option1</div>;
        case 2:
          return <div>option2</div>;
      }
}()} // calling the function

Answer 3

主要错误在这里：

<Typography variant="h6" >
    {(function(){
        switch(this.props.pageActive) { // does not work
            case 1:
                return <div>option1</div>;
            case 2:
                return <div>option2</div>;
        }
    })}
</Typography>

您声明了匿名函数(function() {.....})，但没有调用它。只需在末尾添加和添加一个圆括号-(function() {.....}())或按照@ avinash-mahlawat的建议-将此代码移到单独的类方法中。这将使您的代码更具可读性。

别忘了将changePageActive传递给LeagueToolbar

<LeagueToolbar pageActive={this.state.pageActive} changePageActive={this.changePageActive}/>

如何将变量传递给子类并在React中进行更改？

3 个答案: