代码:
export default function RoundedLink({ url, text, className, target }) {
return (
<a
className={`${buttonCorners} ncss-btn-medium border-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm ${className}`}
href={url}
rel="noopener"
target={target}
>
{text}
</a>
);
}
RoundedLink.defaultProps = {
className: '',
target: '_self',
};
RoundedLink.propTypes = {
url: string.isRequired,
text: string.isRequired,
className: string,
target: string,
};
但是当我测试它时,我在 className 和目标中得到 undefined
:
expect(RoundedLink({})).toMatchSnapshot();
...
<a
className="css-1by5joz ncss-btn-medium border-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm undefined"
href={undefined}
rel="noopener"
target={undefined}
/>
当我尝试在没有必需 Prop 的情况下创建它时,这不应该是错误的吗?
为什么没有填充默认 Prop ?
我唯一的结论是,如果您不使用 class
或 createReactClass
来声明您的组件,则默认值和 prop 类型将不起作用。
https://reactjs.org/docs/react-without-es6.html#declaring-default-props
最佳答案
您也可以在无状态函数组件上使用 defaultProps。可能是因为您像普通函数一样调用组件而不是使用 renderer.create 来实例化组件,所以您会出现这种行为:
const tree = renderer.create(<RoundedLink />).toJSON();
expect(tree).toMatchSnapshot();
完整示例:
import TestRenderer from 'react-test-renderer';
import React from 'react';
import RoundedLink from './RoundedLink';
describe('<RoundedLink />', () => {
test('#render', () => {
const tree = TestRenderer.create(<RoundedLink />).toJSON();
expect(tree).toMatchSnapshot();
});
});
关于javascript - .defaultProps 是否适用于无状态 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52300912/