小编Rob*_*ood的帖子

我有一个 TypeScript React 视频组件，我想在单击时播放它。我希望通过使用点击处理程序来执行此操作，该处理程序通过 ref 访问视频并调用 .play()，但是我收到此错误：

TS2339: Property 'play' does not exist on type 'RefObject<HTMLVideoElement>'.

这是我的代码（省略了不相关的部分）：

class FullBleedVideo extends React.Component<PropDef, StateDef> {
  private fullBleedVideo: React.RefObject<HTMLVideoElement>;

  constructor(props: PropDef) {
    super(props);

    this.fullBleedVideo = React.createRef();
    this.state = {
      isPlaying: false,
    };
  }

  public handleVideoClick() {
    this.setState({ isPlaying: true });
    this.fullBleedVideo.play();
  }

  render() {
    const { isPlaying } = this.state;

    return (
      <div className="video_container" onClick={this.handleVideoClick.bind(this)}>
        <video
          ref={this.fullBleedVideo}
        >
          <source src={src} type="video/mp4" />
        </video>
      </div>
    );
  }
}

我对 TypeScript 很陌生，但不确定我哪里出了问题？

我正在尝试构建我的第一个React项目,目前我正在整理一个汉堡导航按钮,以及单击导航时出现的菜单.

我把它分成了两个部分; 汉堡和MenuOverlay.两者的代码如下.

目前我有一个onClick on Hamburger在其上切换一个类,但是我如何从该点击切换菜单？隐藏着display:none; 默认情况下.可能是一个非常基本的问题,所以道歉 - 仍然试图让我的头围绕React.

MenuOverlay

import React from 'react';
import { Link } from 'react-router';

const MenuOverlay = () => {
    return (
        <div className="menuOverlay">
            <div className="innerMenu">
                <p><Link to="/">Home</Link></p>
                <p><Link to="/">About</Link></p>
                <p><Link to="/">Contact</Link></p>
            </div>
        </div>
    );
};

export default MenuOverlay;

汉堡包

import React, { Component } from 'react';

class Hamburger extends Component {
    constructor(props) {
        super(props);

        this.state = { active: '' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        var toggle = this.state.active === 'is-active' ? …

我正在 Vue 中开发一个调查构建器，用户创建的调查问题提交给 Vuex，以便以后可以像这样检索它们：

computed: {
  inputs() {
    return this.$store.getters.questions(this.pageNumber);
  },
},

pageNumber是组件接收并inputs()返回一系列问题的道具。这一切似乎都可以在屏幕上呈现正确的问题，但我在 Jest 测试中遇到了麻烦。

为了进行测试，我希望我可以像下面的尝试一样使用 getter 来模拟商店（省略某些部分）：

const localVue = createLocalVue();
localVue.use(Vuex);

beforeEach(() => {
  state = {
    survey: {
      pages: [
        // pages objects
      ],
    },
  };

  getters = {
    questions: () => [
      { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] },
    ],
  };

  store = new Vuex.Store({
    state,
    getters,
  });
});

但这会导致错误：

TypeError: …