首页 > 解决方案 > 无法在 JSX 中导入视频组件

问题描述

我正在为我的一位医生朋友构建一个带有本地信息的电视屏幕、一个视频播放器和一个新贴纸作为网络应用程序。是候诊室的

我有主应用程序并想创建 2 个应该在主应用程序中导入的组件。我正在使用 nginx 和 npm。每当我尝试导入 video.jsx 组件时,例如:

import { Video } from './Video';

我在本地主机页面上收到“403 Forbidden”错误。

制作:*** Keine Regel vorhanden,um das Ziel “_build/tmp/wztv/Video”,benötigt von “_build/tmp/wztv/main.js”,zu erstellen。施卢斯。

非德国人用英语^^:

制作:***没有规则来构建目标“_build/tmp/wztv/Video”,需要来自“_build/tmp/wztv/main.js”,. 结尾

    import React from 'react';
    import { Video } from './Video';

    // Main
    class Main extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          praxisname: 'Praxis Dr. Lurch',
          currenttime: {},
          patientendata: {},
          content: {}
          };
         }

    chooseVideo(newVideo) {
        this.setState({
          src: VIDEOS[newVideo]
        });


      render() {
        return (
          <div>
            <h1>Video Player</h1>
            <Menu chooseVideo={this.chooseVideo} />
            <Video src={this.state.src} />
          </div>

视频组件:

    import React from 'react';

    export class Video extends React.Component {
      render() {
        return (
          <div>
             <video src={this.props.src}controls autostart autoPlay muted />
          </div>
        );
       }
      }

菜单组件(用于功能):

    import React from 'react';

    export class Menu extends React.Component {
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(e)  {
        var text = e.target.value;
        this.props.chooseVideo(text);
      }

      render() {
        return (
          <form onClick={this.handleClick}>
            <input type="radio" name="src" value="vid1" /> vid1
            <input type="radio" name="src" value="vid2" /> vid2
            <input type="radio" name="src" value="vid3" /> vid3
            <input type="radio" name="src" value="vid4" /> vid4
          </form>
         );
        }
      }

我只想正确显示和渲染视频。

标签: reactjsnpmjsx

解决方案


推荐阅读