将React组件转换为Typescript？-Java 学习之路

我正在尝试将React Redux组件的示例复制到typescript：https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3

我正在使用这个函数击中一个deadend：

export default connect（mapStateToProps，mapDispatchToProps）（ItemList）;

我收到一个关于它如何不能映射到ItemList的错误 .

解决这个问题的一种方法我认为是将类声明更改为：

class ItemList extends React.Component<{proper component map}, {proper state map}> {

但是，如果我这样做是因为道具现在已被映射，我不能简单地包含ItemList，现在我希望提供参数 .

另一种选择可能是:(支持任何）.fetchData（）然而这感觉不对 .

有没有解决的办法？我在打字稿中做错了React Redux吗？

1 回答

创建完所有内容后，将其与 connect 一起导出 .

interface PassedProps {
  productId: number;
}

interface StateToProps {
  addedProductIds: number[];
  quantityById: { [key: string]: number };
  quantity: number;
}

interface DispatchToProps {
  addToCart: (productId: number) => void;
  removeFromCart: (productId: number) => void;
}

// Needs to be added to src/store:GlobalStore interface with the correct prop name created from the name of the reducer
export interface CartState {
  addedProductIds: number[];
  quantityById: { [key: string]: number };
}

const mapStateToProps = (globalState: GlobalState): StateToProps => {
  const state: CartState = globalState.cart;

  return {
    addedProductIds: state.addedProductIds,
    quantityById: state.quantityById,
    quantity: Object.keys(state.quantityById).reduce( (sum: number, key: string) => state.quantityById[key] + sum, 0)
  };
};


const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchToProps => {
  return {
    addToCart: (productId: number) => dispatch({ type: 'ADD_TO_CART', productId } as AddToCartAction),
    removeFromCart: (productId: number) => dispatch({ type: 'REMOVE_FROM_CART', productId } as RemoveFromCartAction),
  };
}

export type Props = PassedProps & StateToProps & DispatchToProps;

class CartButton extends Component<Props, CartState> {
  render() {
    const { quantity } = this.props;

    return (
      <View>
        <Text>
          { this.props.addedProductIds.length } type item is in the cart, totals to { quantity } item.
        </Text>
        <View>
          <Button
            onPress={this.onPressAdd.bind(this)}
            title="Add to Cart"
            color="#841584"
          />

          <Button
            onPress={this.onPressRemove.bind(this)}
            title="Removefrom Cart"
            color="#841584"
          />
        </View>
      </View>
    );
  }

  onPressAdd() {
    this.props.addToCart(this.props.productId);
  }

  onPressRemove() {
    this.props.removeFromCart(this.props.productId);
  }
}

export default connect<StateToProps, DispatchToProps, PassedProps>(mapStateToProps, mapDispatchToProps)(CartButton);

然后你可以使用它来指定要传递的所需道具（PassedProps接口）：

import CartButton from '../components/CartButton';

// ....
  render() {
    return(<CartButton productId={5} />)
  }

回复于 2024-04-28T13:07:10+08:00

将React组件转换为Typescript？

1 回答

相关问题