小编Hel*_*llo的帖子

我的应用程序中有 2 个组件，如下所示：

<Comp1>
...
    <Comp2 prop1='test1' prop2='test2'/>
    <Comp3 prop1='test1 />
</Comp1>

Comp2 和 Comp3 组件如下所示：

const Comp2 = (prop1, prop2) => {
...
...
}
Comp2.propTypes = {
prop1: PropTypes.string.isrequired,
prop2: PropTypes.string.isrequired,
}


const Comp3 = prop1 => (
...
...
)
Comp2.propTypes = {
prop1: PropTypes.string.isrequired,
}

正如我们从上面看到的，我将字符串值“test1”从 Comp1 传递到 2 个组件 - Comp2 和 Comp3。

Comp2 收到一个字符串值 'prop1' 作为 'test1' - 正如预期的那样。

但是，Comp3 接收相同的属性“prop1”作为对象而不是字符串。所以在 Comp3 中，prop1 不等于字符串 'test1'，而是等于 Json 对象形状的 'prop1: test1'。当两个组件以非常相似的方式定义时，我无法弄清楚为什么相同的属性会以不同的类型传递给这两个组件。

有人可以帮我理解这是怎么回事吗？非常感谢您。

我的 React 代码中有一个功能组件，如下所示：

const Compo = ({funcA}) => {
   useEffect(() => {
      window.addEventListener('x', funcB, false);

      return () => {
       window.removeEventListener('x', funcB, false); 
      }
   });

   const funcB = () => {funcA()};      

   return (
      <button
        onClick={() => funcA()}
      />
   );
};

Compo.propTypes = {
   funcA: func.isRequired
}

export default Compo;

我需要测试上述功能组件，以确保如 useEffect() 挂钩中所述添加和删除事件侦听器。

这是我的测试文件的样子 -

const addEventSpy = jest.spyOn(window, 'addEventListener');
const removeEventSpy = jest.spyOn(window, 'removeEventListener');

let props = mockProps = {funcA: jest.fn()};
const wrapper = mount(<Compo {...props} />);

const callBack = wrapper.instance().funcB; …