Question

我想使用React-Summernote但它的输入不可用我尝试了以下

let ReactSummernote1: any = require('react-summernote');
let ReactSummernote = ReactSummernote1.ReactSummernote;

...

 <ReactSummernote
     value={this.props.content}
     options={{
                   dialogsInBody: true,
                   toolbar: [
                      ['style', ['style']],
                      ['font', ['bold', 'italic', 'underline', 'clear']],
                      ['fontname', ['fontname', 'fontsize', 'color']],
                      ['para', ['ul', 'ol', 'paragraph']],
                      ['insert', ['link', 'picture', 'table', 'hr']],
                      ['view', ['codeview']]
                   ]
                 }}
   onChange={!this.props.scheduledSession ? this.props.contentUpdated : function () { } } />

但这会产生错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Answer 1

因此，如果您在查找文件路径时遇到问题。您可以更改服务器配置文件。我正在使用webpack。这是我的webpack-config.js的副本。您可以更改不需要的行。

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool:"eval",
  entry: [
    'webpack-hot-middleware/client?reload=true',
    './src/index.tsx'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    },
    extensions:[".js", ".ts", ".tsx","", ".webpack.js", ".web.js"],
    fallback: path.join(__dirname, "node_modules")
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loaders: ['react-hot', 'ts'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.(scss|css)$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(jpg|png|svg)$/,
        loaders: [
            'file-loader?name=[name].[ext]'
        ]
      }
    ]
  }
};

之后这应该有效。

const ReactSummernote = require('react-summernote');

或者您可以尝试使用./进行导航

注意：请确保您重定向到正确的文件夹。

const Name = require ('./../folder/file-name');

Answer 2

您只需创建自定义类型定义文件（custom_name.d.ts）

即可

declare module 'react-summernote' {
    var _reactSummernote: any;
    export = _reactSummernote;
}

然后您可以使用标准语法

导入模块

import * as ReactSummernote from 'react-summernote';

欲了解更多信息： http://definitelytyped.org/guides/best-practices.html

Answer 3

查看source code，图书馆react-summernote默认导出ReactSummernote

所以使用node require，你应该能够做到

const ReactSummernote = require('react-summernote');

要在JSX中使用它，您可能至少需要将其键入为ReactComponent：

const ReactSummernote = require('react-summernote') as React.ComponentClass<any>;

提出类型定义并将它们贡献给DefinitelyTyped将是一个很好的举动......

如何在没有定义文件的Typescript中使用JS库（React-Summernote）

3 个答案: