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

Question

我在使用React和TypeScript时遇到了一些问题，现在我坚持将无状态组件作为观察者。 我使用MobX btw。

StatelessComponent：

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

下面的代码给出了类型missmatch将ClassicComponent分配给StatelessComponent并且我无法解决它。

错误：[ts]输入'ClassicComponentClass <{task：Task; deleteTask：（e：any）=> void; '>'不能赋值为'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> )); 

如何使无状态组件成为观察者？ 有没有“更漂亮”的方式来写这个？

Answer 1

看起来像这样：

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