道具表不来了

时间:2019-04-26 07:29:34

标签: reactjs babel-loader storybook

当我使用babel 7转换打字稿文件时,Proptable不会出现。代码的Github链接。(https://github.com/gmukul01/component-library-ts-boilerplate

Image

我的故事书的webpack配置文件就是这样

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const packages = path.resolve(__dirname, '../', 'packages');
const utils = path.resolve(__dirname, '../', '.storybook/utils');

module.exports = ({ config, mode }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: [packages, utils],
        exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /__dist__/],
        use: ['babel-loader', 'stylelint-custom-processor-loader', 'react-docgen-typescript-loader']
    });
    config.plugins.push(new ForkTsCheckerWebpackPlugin());

    config.resolve.extensions.push('.ts', '.tsx');
    config.resolve.plugins = [new TsconfigPathsPlugin()];

    return config;
};

我的组件代码如下:

import { WithStyle } from '@core-utils/types';
import React from 'react';
import Text from '../Text';
import { ButtonStyled } from './Button.styled';
import { Props } from './types';

import { isValidStringOrNumber } from '@core-utils/helpers/ReactHelper';

export const Button: React.SFC<Props> & WithStyle = props => {
    return (
        <ButtonStyled {...props}>
            {React.Children.map(props.children, c => {
                return isValidStringOrNumber(c) ? (
                    <Text textWeight="Strong" uppercase>
                        {c}
                    </Text>
                ) : (
                    c
                );
            })}
        </ButtonStyled>
    );
};
Button.displayName = 'Button';
Button.Style = ButtonStyled;

export default Button;

类型文件看起来像这样

import { HTMLProps, WithThemeProp } from '@core-utils/types';

export interface Props extends HTMLProps<HTMLButtonElement>, WithThemeProp {
    type?: 'button' | 'reset' | 'submit';
    solid?: boolean;
    flat?: boolean;
    outlined?: boolean;
}

0 个答案:

没有答案