ホーム>source

Reactでコンテキストを使用する方法をテストしていますが、何らかの理由でtypescriptエラーが発生してアプリを実行できません!

コード:

<前>ウィズウィズ

私が得るエラー: 

<前>ウィズウィズ

これを修正し、それがそのエラーをスローする理由を説明する方法はありますか?

import React from 'react'; import './App.css'; class App extends React.Component { render() { return <Toolbar theme="dark" />; } } function Toolbar(props) { // The Toolbar component must take an extra "theme" prop // and pass it to the ThemedButton. This can become painful // if every single button in the app needs to know the theme // because it would have to be passed through all components. return ( <div> <ThemedButton theme={props.theme} /> </div> ); } class ThemedButton extends React.Component { render() { return <button className={'btn btn-' + this.props.theme}></button>; } } export default App;
あなたの答え
  • 解決した方法 # 1

    タイプを指定するだけです。

    <前>ウィズウィズ import React from "react"; import "./App.css"; interface IToolbarProps { theme: string; } class App extends React.Component { render() { return <Toolbar theme="dark" />; } } // Here in the function function Toolbar(props: IToolbarProps) { // The Toolbar component must take an extra "theme" prop // and pass it to the ThemedButton. This can become painful // if every single button in the app needs to know the theme // because it would have to be passed through all components. return ( <div> <ThemedButton theme={props.theme} /> </div> ); } // HERE as a generic class ThemedButton extends React.Component<IToolbarProps> { render() { return <button className={"btn btn-" + this.props.theme}></button>; } } export default App;

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ reactjs - 入力フィールドにデータを書き込んで送信ボタンをクリックすると、データが未定義であると通知されます