Question

请帮助。假定该组件可以像这样使用：

<MouseCoordinates></MouseCoordinates>

or

<MouseCoordinates>
    {(x,y) => { ... }}
</MouseCoordinates>

我不明白它想要什么。这是代码：

import React, { MouseEvent } from 'react';

const initialState = { x: 0, y: 0 };
const defaultProps = {
    children: (args: TMouseCoordinates) => null,
};

type TMouseCoordinates = typeof initialState;
type TDefaultProps = typeof defaultProps;

type TState = Readonly<TMouseCoordinates>;
type TProps = Partial<
    {
        children?: (coordinates: TMouseCoordinates) => JSX.Element;
    } & TDefaultProps
>;

class MouseCoordinates extends React.Component<TProps, TState> {
    static readonly defaultProps: TProps = defaultProps;
                    ^^^^^^^^^^^^

    readonly state: TMouseCoordinates = initialState;

    componentDidMount() {
        document.addEventListener('mousemove', this.handleMouseMove);
                                                ^^^^^^^^^^^^^^^^^^^^
    }

    componentWillUnmount() {
        document.removeEventListener('mousemove', this.handleMouseMove);
                                                ^^^^^^^^^^^^^^^^^^^^
    }

    handleMouseMove = (event: MouseEvent<HTMLElement>): void => {
        const { screenX = 0, screenY = 0 } = event;

        this.setState(() => ({
            x: screenX,
            y: screenY,
        }));
    };

    render() {
        const { children } = this.props;
        const isRenderIsFunction = typeof this.props.children === 'function';

        return isRenderIsFunction ? children(this.state) : null;
                                    ^^^^^^^^^^^^^^^^^^^^
    }
}

我在以下地方有奇怪的错误

：

static readonly defaultProps: TProps = defaultProps;

键入'{children：（args：{x：number; y：number;}）=> null; }' 不是可分配给'Partial <{children ?:（（coordinates：{x：number; y：数字； }）=>元素）|未定义}＆{chi ...'。种类属性“子级”不兼容。类型'（（args：{x：number; y：number;}）=> null'不能分配给类型'（（（coordinates {{x：number; y：number;}）=> Element）＆（（args：{x：number; y：number;}）=> nu ...'。类型'（（args：{x：数字; y：数字;}）=> null'不能分配给类型'（（坐标：{x：数字; y：数字;}）=> 元素）＆（（args：{x：number; y：number;}）=> null）'。类型'（args：{x：数字; y：数字;}）=> null'不能分配给类型'（坐标：{x：数字; y：数字;}）=> 元件'。不能将“ null”类型分配给“ Element”类型。

这是神秘的错误之处：

document.addEventListener('mousemove', this.handleMouseMove);

“类型'（event：MouseEvent）=> void'的参数不是可分配给类型的参数 'EventListenerOrEventListenerObject'。\ n输入'（event： MouseEvent）=> void'无法分配给类型 'EventListenerObject'。\ n类型中缺少属性'handleEvent' '（event：MouseEvent）=>无效'。“，

最后一个

 return isRenderIsFunction ? children(this.state) : null;

无法调用可能是“未定义”的对象。

Answer 1

type TProps = Partial<
{
    children?: (coordinates: TMouseCoordinates) => JSX.Element;
} & {
    children: (args: TMouseCoordinates) => null,
}>;

因此，您简单地说：children道具是必需的，而不是必需的，并且包含两个功能：(args: TMouseCoordinates) => null和(coordinates: TMouseCoordinates) => JSX.Element，它的简单意义不大。

我想这是您需要的界面：

interface Props{
    children?: (args: TMouseCoordinates) => (JSX.Element | null)
}

Answer 2

MouseEvent不应从React导入

Answer 3

这是正确的代码：

import React, { Component } from 'react';
import { connect } from "react-redux";
import * as actions from "../actions";

class Videoplayer extends Component {
    componentDidMount() {
        this.props.fetchSong("house");
    }

    render() {
        return (
            <video className="responsive-video" controls autoPlay>
                <source src={this.props.songURL} type="video/mp4"></source>
            </video>
        )
    }
}

const mapStateToProps = state => ({
    songURL: state.yourStateName,
});

export default connect(mapStateToProps, actions)(Videoplayer);

反应渲染道具图案类错误

3 个答案: