Reactj，typescript Property'setState'在類型

中缺少

我從我的反應組件中收到ts錯誤。該組件運行良好，建設等，但打字稿顯示IDE內的錯誤。不知道我需要如何聲明此刪除錯誤。我試圖在組件本身內創建一個setState方法，但是這給了更多的錯誤。Reactj，typescript Property'setState'在類型

Error:(15, 19) TS2605:JSX element type 'Home' is not a constructor function for JSX elements. Property 'setState' is missing in type 'Home'.

「打字稿」：「^ 2.3.4」，

「反應」：「^ 15.5.4」，

「反應-DOM」：「^ 15.5.4」，

----

export class App extends React.Component<Props, State> { 
    public state: State 
    public props: Props 

constructor(props: Props) { 
    super(props) 
    this.state = { 
    view: <Home />, <<<< 
    }

- ！其餘爲簡潔

0123取出

來源

2017-06-15 Jimi

您不應該將組件實例置於您的狀態。相反，你需要將這個組件的道具置於你的狀態，然後在'render'函數中創建它。 –

哦，對，我基本上使用this.setState（{view：}）綁定每個視圖，然後在render方法下渲染視圖，如{this.state.view}。我想用它作爲基本的路由器，它正在工作，但在IDE中產生ts錯誤。 – Jimi

這不是它應該做的。國家需要保持簡單。永遠不要讓組件處於狀態或道具 –

下面是如何使用狀態和渲染組件的例子：

type HomeProps = { 
    text: string; 
} 
class Home extends React.Component<HomeProps, void> { 
    public render() { 
     return <h1>{ this.props.text }</h1> 
    } 
} 

type AppState = { 
    homeText: string; 
} 
class App extends React.Component<void, AppState> { 
    constructor() { 
     super(); 

     this.state = { 
      homeText: "home" 
     }; 

     setTimeout(() => { 
      this.setState({ homeText: "home after change "}); 
     }, 1000); 
    } 

    render() { 
     return <Home text={ this.state.homeText } /> 
    } 
}

正如你所看到的，道具和狀態對象總是簡單的，和渲染方法負責創建實際的組件。
這種方式反應瞭解哪些組件發生了變化以及DOM樹的哪些部分應該更新。

來源

2017-06-15 15:05:53

好吧，明白了。感謝這個偉大的例子。 – Jimi

Reactj，typescript Property'setState'在類型

回答

相關問題