Question

我为学校的记录系统构建了一个项目，在其中我使用React构建了前端。在管理页面的主要组件上，我想要一个能够在管理对话框中导航的react-router。当我试图实现这个时，出现了以下问题：当尝试通过react路由组件将参数传递给类时，子组件不会收到任何道具。

我有以下反应组件层次结构：

class Test extends React.Component {
   constructor() {
       super();

       console.log("in class: " + this.props)
   }

   render() { return <div>test</div>}
}

class AdminPage extends BasicPage {
    /* Other class functions here... */
    render() {
       let pageBody = "";
       if(!this.state.isLoading)
           pageBody = (
               <Router>
                   <Switch>
                       <Route path={"/:schoolName/admin"} component={AdminMenu} exact/>
                       <Route path={"/:schoolName/admin/view/:id"} exact
                          component={() => <Test par1="abc" />} />
                   </Switch>
               </Router>
           );
       return (
           <Layout title={ this.state.isLoading ?
               TITLE_UNTIL_LOADED :
               PAGE_TITLE + this.state.schoolPrefs.heb_name}
                   subtitle={ this.state.subtitle }
                   notification={ this.state.notification }
                   isLoading={ this.state.isLoading }
           >
               {pageBody}
           </Layout>
       );
    }
}

当我转到/Random Name/admin/view/someID时，它会打印到控制台in class: undefined。

然后我想知道问题是在传递组件还是接收组件中。我将函数otherTest(props)定义如下：

function otherTest(props) {
   console.log("Function props: " + props);
   return (<Test {...props} />);
}

然后像这样更改了路径组件：

<Route path={"/:schoolName/admin/view/:id"} exact
  component={otherTest} />

当我去/Random Name/admin/view/someID时，我看到该功能收到道具就好了，但<Test … />内的日志仍然打印undefined。

我还尝试在主渲染功能中的<Test param1=”123” />变量之后添加{pageBody}，但它也打印了in class: undefined。

有人知道问题出在哪里吗？

感谢。

Answer 1

您必须从构造函数中获取props参数，然后将其传递给super。

constructor(props){
super(props);
}

Answer 2

不要在构造函数中使用this.props beacuse构造函数仅在创建类时刻。使用此代码：

constructor(props) {
 super(props);

 console.log(props);
}

React组件接收道具为未定义

2 个答案: