使用typescript反应，观察者无状态组件

Question

Im having some problems using React with TypeScript and now Im stuck with making a stateless component an observer. Im using MobX btw.

StatelessComponent:

 const TaskItem: React.SFC<{task: Task, deleteTask: (e:any) => void}> = (props) => ( <li onClick={ props.deleteTask }>{ props.task.name }</li> ); 

Code below gives type missmatch assigning ClassicComponent to StatelessComponent and im getting nowhere solving it.

Error: [ts] Type 'ClassicComponentClass<{ task: Task; deleteTask: (e: any) => void; }>' is not assignable to type 'StatelessComponent<{ task: Task; deleteTask: (e: any) => void; }>'.

 const TaskItem: React.SFC<{task: Task, deleteTask: (e:any) => void}> = observer((props) => ( <li onClick={ props.deleteTask }>{ props.task.name }</li> )); 

How do I make a stateless component an observer? And is there a "prettier" way to write this?

Answer 1

Looks like this works:

 const App = observer((props: {test: string}) => <div>{props.test}</div> ); ReactDOM.render(<App test="sdsdfsddddddddddddddddddf" /> ,document.getElementById('root'));