Question

当我的子组件是基于类的组件时，似乎没有将道具传递给子组件。这是我的父组件：

class ScreeningsList extends React.Component{
    state = {screenings: [] };

    componentDidMount = async () => {
        const response = await apis.getAllScreenings();
        this.setState({screenings: response.data});
    }

    render(){
        return (
            <div>
                <ScrTest screeningsList = {this.state.screenings}/>
            </div>
        )
    }
}

这是我的子组件：

class ScrTest extends React.Component{

    render(){
        return (
            <div className="screeningsContainer">
                <h2>Title: {this.props.screeningsList._id}</h2>
            </div>
        )
    }
}

在这里，我试图显示筛选的ID。道具中的值不存在。根本没有道具。但是，当我使用功能组件并使用箭头功能时：

const ScreeningsToRender = props => {
...
}

我可以使用props.screeningsList来访问道具，并使用该道具内部的每个值。渲染组件成功，我可以看到所有筛选的列表。我应该怎么做才能在子组件中正确接收道具？

Answer 1

在子组件中需要一个构造函数：

class ScrTest extends React.Component{

    constructor(props){
       super(props);
    }

    render(){
        return (
            <div className="screeningsContainer">
                <h2>Title: {this.props.screeningsList._id}</h2>
            </div>
        )
    }
}

“在为React.Component子类实现构造函数时，应在其他任何语句之前调用super（props）。否则，在构造函数中未定义this.props”。来源：https://reactjs.org/docs/react-component.html#constructor

在使用功能组件填充时，将其传递给基于子类的组件时道具是空的

1 个答案: