gpt4 book ai didi

javascript - React.JS 视频播放器错误

转载 作者:行者123 更新时间:2023-12-02 21:28:17 26 4
gpt4 key购买 nike

我正在与一名玩家合作。我正在 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"/>

这是怎么回事?

最佳答案

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

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

而不是

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

关于javascript - React.JS 视频播放器错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60680948/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com