返信コンポーネントが未定義の小道具を受け取る

Question

私は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に出力します。私は、次のしている

は、コンポーネント階層を反応させます。

問題が通過コンポーネントか受信コンポーネントにあるかどうかを確認する必要がありました。

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

そして、そのようにルート・コンポーネントを変更：私は次のように機能 otherTest(props)を定義し、その後、私は /Random Name/admin/view/someIDに行ったとき

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

、私は機能がうまく小道具を受け取ったことを見ましたが、 <Test … />内のログはまだ印刷されたundefinedです。

メインレンダー機能で{pageBody}変数の後に<Test param1=”123” />を追加しようとしましたが、in class: undefinedも印刷しました。

誰かが問題の原因を知っていますか？

ありがとうございました。

Answer 1

コンストラクタからpropsパラメータを取得してsuperに渡す必要があります。

constructor(props){ 
super(props); 
} 

Answer 2

this.propsをコンストラクタbeacuseコンストラクタで使用しないでください。 このコードを使用：

constructor(props) { 
super(props); 

console.log(props); 
}