代码之家 › 专栏 › 技术社区 › jcollum

.defaultProps是否适用于无状态的React组件?

jestjs unit-testing reactjs javascript

jcollum · 技术社区 · 8 年前

代码:

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,
};

但当我测试的时候 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}
  />

当我试图在没有必要道具的情况下创建它时,这难道不是一个错误吗?

我唯一的结论是,默认值和道具类型不工作,如果你不使用 class createReactClass 声明组件。

https://reactjs.org/docs/react-without-es6.html#declaring-default-props

1 回复 | 直到 7 年前

jcollum 8 年前

也可以在无状态函数组件上使用defaultProps。可能是因为您像调用普通函数一样调用组件,而不是使用渲染器.创建要实例化组件:

  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();
  });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前