React.JS 视频播放器错误

Question

我正在与一名球员合作。我正在用 React 开发一个网站，想在某些页面上使用视频播放器的片段。所以我用那个代码创建了 videoFr.js 脚本。

import React from 'react'
import '../styles/video.scss';

const fragmentPlayer =(props)=> {
    return (

      <>
      <iframe 
      width="560" 
      height="315" 
      src={props.url} 
      frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>

      </iframe>
      </>
    )


}

export default fragmentPlayer;

我想在主页上呈现视频并传递组件。

import React from 'react'
import '../styles/Main.scss';
import fragmentPlayer from '../Components/video.js';

class Main extends React.Component {



    render(){
        return (
           <body>
               <sector id='banner'>
                   <h1>hi {this.props.name}</h1>
                <h1>- Culture</h1>
                <p>We unite business and education. And much more...</p>
                <fragmentPlayer url="https://www.youtube.com/embed/QTACugN67yc"/>
               </sector>
               <sector id='m-training'>
               <h1>TRAINING & COMPETITION</h1>
                <p>Every semester, thousands participants  from over 90 countries join the X-Culture competition.
                <br/>They compete, collaborate, learn the challenges and best practices of international business consulting.</p>
               </sector>
               <sector id='m-business'>
               <h1>BUSINESS SOLUTIONS</h1>
                <p>Companies present their business challenges. Thousands of amateurs and professionals develop their solutions.
                    <br/>If there is something good for your business out there, they will find it and bring it to you.</p>
               </sector>
           </body>

        )

    }
}

export default Main;

渲染中没有任何反应。但是，当我不是从我的脚本中导入 fragmentPlayer，而是导入 Player 并使用 Player - 一切正常。

import Player from '../Components/video.js';

 <Player url="https://www.youtube.com/embed/QTACugN67yc"/>

这是怎么回事？

Answer 1

在 React 中，我们的组件名称首字母必须大写，因为这是 React 组件和 html 标签之间的区别。所以使用

import FragmentPlayer from '../Components/video.js';

而不是

import fragmentPlayer from '../Components/video.js';

React.JS 视频播放器错误

React.JS video player bug

javascript

reactjs

react-player