我有一个非常基本的有状态组件,在其中我使用recompose将多个HOC添加到我的组件中(在我的示例中,为简单起见,我只使用了一个)。出于某种原因,打字稿给我关于我的道具进入组件的错误。如何摆脱这个错误?
这是我的代码:
import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';
interface IStoreState {
readonly sessionState: {
authUser: { email: string; }
}
}
interface IAccountPageProps {
authUser: { email: string }
}
const AccountPage = ({ authUser }: IAccountPageProps ) =>
<div>
<h1>Account: {authUser.email}</h1>
</div>
const mapStateToProps = (state: IStoreState) => ({
authUser: state.sessionState.authUser,
});
export default compose(
connect(mapStateToProps)
)(AccountPage);
我得到的错误是:
Argument of type '({ authUser }: IAccountPageProps) => Element' is not assignable to parameter of type 'ComponentType<{}>'.
Type '({ authUser }: IAccountPageProps) => Element' is not assignable to type 'StatelessComponent<{}>'.
Types of parameters '__0' and 'props' are incompatible.
Type '{ children?: ReactNode; }' is not assignable to type 'IAccountPageProps'.
Property 'authUser' is missing in type '{ children?: ReactNode; }'.
如果我不使用重组,而是写
export default connect(mapStateToProps)(AccountPage)
我没有任何错误。
通过compose的类型输入,您可以指定结果组件的类型以及可以调用的组件的类型,因此可以避免以下错误:
export default compose<IAccountPageProps, {}>(
connect(mapStateToProps)
)(AccountPage);
不幸的是,compose不能确保类型安全或传递给它的功能的兼容性。
因此,例如,即使它显然无效,也不会产生键入错误:
export default compose<IAccountPageProps, {}>(
connect(mapStateToProps),
() => 'compose typing allows any function'
)(AccountPage);
嵌套HOC调用更安全:
export default
connect(mapStateToProps)(
firstHoc(
secondHoc(
AccountPage
)
)
);
我有一个React应用程序,其中来自父组件的道具被传递到子组件,然后道具设置子组件的状态。 如何让它更新子组件上的状态? 我的精简代码:
TypeScript 2.1现在支持对象扩展/静止,因此不再需要任何解决方法! TypeScript支持JSX扩展属性,该属性通常用于React,以将HTML属性从组件传递到呈现的HTML元素: 但是,如果您向超文本标记语言元素传递任何未知的道具,React会引入警告。上面的例子会产生一个React运行时警告,是
问题内容: 我正在尝试将表示性组件与容器组件分开。我有一个和一个。容器负责触发redux操作,以根据当前用户获取适当的网站。 问题是在最初呈现容器组件之后,异步获取了当前用户。这意味着容器组件不知道它需要重新执行其函数中的代码,该代码将更新数据以发送到。我认为我需要在其props(user)之一更改时重新渲染容器组件。如何正确执行此操作? 问题答案: 您必须在方法中添加条件。 该示例用于比较对象。
<罢工> 是否存在这样的情况:父组件将新道具传递给子组件,导致子组件重新呈现,但这不是简单地由父组件重新呈现引起的? 有没有可能看到这样一个例子:组件会因为接收到新的道具而重新呈现,而不是因为父组件正在重新呈现(或者它自己的状态改变了)? 对不起,如果这是一个基本的问题,我是新的反应。
我试图将表示组件与容器组件分开。我有一个和一个。容器负责触发redux操作,以基于当前用户获取适当的站点。 问题在于,在容器组件最初呈现之后,当前用户是异步获取的。这意味着容器组件不知道需要在其函数中重新执行代码,该函数将更新数据以发送到。我想当容器组件的一个道具(用户)发生变化时,我需要重新渲染它。如何正确地执行此操作?
问题内容: 什么是对React组件prop更新进行单元测试的正确方法。 这是我的测试装置; 这可以正常工作,并且测试通过了,但是显示了反应警告消息 我要测试的只是属性的更新,而不是使用其他属性创建元素的新实例。有没有更好的方法来执行此属性更新? 问题答案: AirBnB的酶库为这个问题提供了一个优雅的解决方案。 它提供了一个setProps方法,可以在浅包装或jsdom包装上调用该方法。