javascript - Import'd React.Component 不使用 Typescript 渲染

标签 javascript reactjs typescript typescript-typings

在 App.tsx 中,我正在导入 CounterComponent.tsx ,如果 CounterComponent 正在导出函数而不是 React 类,则导入有效。

如果你想克隆/复制,这里是提交:https://github.com/Falieson/react15-meteor1.5/commit/d06ebc80c4b75850338c9a2cf11cf3ec49cafa40

感谢您的帮助

应用.tsx

import * as React from 'react';
import Counter from './counter/CounterComponent'

const App = (
  <div className='app-container'>
    {Counter}
  </div>
)
export default App

计数器组件.tsx

import * as React from 'react'

class CounterModule extends React.Component<{}, {}> {
  public render() {
    return (
      <div>
        Counter Module Placeholder
      </div>
    )
  }
}

export default CounterModule

最佳答案

在 React 中你应该使用 <Element />当你想渲染一些元素时。所以改变

const App = (
  <div className='app-container'>
    {Counter}
  </div>
)

const App = (
  <div className='app-container'>
    <Counter/>
  </div>
)

关于javascript - Import'd React.Component 不使用 Typescript 渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45471250/

相关文章:

javascript - 页脚处的空白

javascript - 如何使用 React 教程修复 Meteor 中的 eslint 错误

javascript - React CSSTransitionGroup 不为高度、宽度或顶部设置动画

javascript - 如何将日期形式排序为最新到最旧的对象数组 react js

javascript - 用于在 Typescript(或 Javascript)中生成 CSV 文件的本地分隔符

typescript - eslint 成员排序陷阱 - 先出现的声明会导致错误

typescript - 如何扩展返回类型?

javascript - jquery验证身份证号码

javascript - 如何在nodejs中实现bluebird promise

reactjs - react Redux 测试