javascript - 自定义验证在反应应用程序中完美运行，但故事书给出错误“意外令牌”

Question

验证被传递给validationRules道具中的元素，如下所示

<Input
    placeholder="Phone Number"
    validationRules={[ required ]}
    onChange={this.updateSearchParams.bind(this, 'phoneNumber')}
/>

验证规则基本上是一个函数，validationRules 是一个函数数组。要求规则如下

export const required = (value: string) => {
  if (!value.toString().trim().length) {
    return false
  }

  return true
};

react 应用程序运行良好，但是当我运行故事书时，文件会出现错误，例如

未捕获的 SyntaxError：无效或意外的令牌

如果没有该 validationRules 道具，故事书运行良好

故事书的当前 webpack.config.js 是

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [SRC_PATH],
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: './.storybook/tsconfig.json'
        }
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.plugins.push(new TSDocgenPlugin());
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

我需要在这里进行额外的配置吗？

标签： javascriptreactjstypescriptwebpackstorybook

Answer 1

如果我们将函数数组作为值传递给道具，TSDocgen 插件会出现一些问题。所以，现在，我删除了插件，

const path = require('path');
const SRC_PATH = path.join(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: [SRC_PATH],
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: './.storybook/tsconfig.json'
        }
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

如果有人找到允许使用 doc 插件的解决方案，欢迎您。