Question

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

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

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

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

  return true
};

react应用程序运行正常，但是当我运行一个故事书时，文件显示类似错误

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

如果没有该验证规则，故事书就可以正常运行

故事书的当前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;
};

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

Answer 1

如果我们将一系列函数作为值传递给prop，则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插件的解决方案，欢迎您。

自定义验证在React应用中正常运行，但故事书给出错误“ Uxpected token”

1 个答案: