Question

我有以下React功能组件，它接受名称作为道具

        public ActionResult Index(int? id)
        {
  var user = User.Identity.GetUserId();
            ViewBag.DeptName=db.Query<AspNetUser>("Select DepartmentId from AspNetUsers where Id = '@0'",id);
}

我的测试如下

const Name = ({ name }) => <h1>{name}</h1>;

Name.propTypes = {
    name: PropTypes.string.isRequired
}

这将返回以下错误

TypeError：无法读取null的属性“ props”

更新

我正在按如下方式调用名称组件

describe("<Name />", () => {
    it("accepts name as a prop", () => {
        const wrapper = shallow(<Name name="Monkey D Luffy"/>);
        expect(wrapper.instance().props.name).toBe("Monkey D Luffy");
    })
})

我发现在无状态组件上调用class Person extends React.Component { state = {name: "Name here"} render () { return <div><Name name={this.state.name} /></div> } }不能与react 16一起工作。*我不能使用instance()，因为它只返回根节点的道具

为什么在渲染的组件上调用实例函数时它返回null，我如何测试传递到无状态组件中的道具？

原始问题

为什么在渲染的组件上调用实例函数时它会返回null

Answer 1

instance() === null用于功能组件，因为功能组件没有实例。

应该使用酶本身的API来访问组件道具：

expect(wrapper.prop('children')).toBe("Monkey D Luffy");

如the reference所述，

要返回整个React组件的道具，请使用wrapper.instance（）。props。这对React 15中的有状态或无状态组件有效。。但是，对于React 16中的无状态React组件，wrapper.instance（）将返回null。，因此wrapper.instance（）。props在这种情况下将导致错误。

在浅浅呈现的功能组件上调用instance（）返回null

1 个答案: