React新手提问一个关于video视频加载的问题。

Question

import React from 'react';import ReactDOM from 'react-dom';class Doctor extends React.Component {    render() {        return (            <div>                <p><a>{this.props.doctorAccount}</a></p>            </div>        )    }}class Info extends React.Component {    render() {        var content = [];        this.props.infos.forEach((info) => {            content.push(                <div key={info.id}>                    <p>{info.name}</p>                    <video id="my-video" controls preload="auto" width="640" height="264">                        <source src={info.video} type='video/mp4' />                    </video>                </div>            );        })        return (            <div className="container">                {content}            </div>        )    }}const doctorAccount = "20180901";const infos = [    {id: '01', name: 'Tom', date: '2018-09-11', video: './video/01.mp4'},    {id: '02', name: 'Lily', date: '2018-09-19', video: './video/02.mp4'}]class App extends React.Component {    render() {        return (            <div className="contain">                <Doctor doctorAccount={this.props.doctorAccount} />                <Info infos={this.props.infos} />            </div>        );    }}ReactDOM.render(<App doctorAccount={doctorAccount} infos={infos}/>, document.getElementById('root'));出来是这个效果。

Answer 1

infos 对象中的video不要相对路径，通过import 或者require引入。

例如：

const infos = [

    {id: '01', name: 'Tom', date: '2018-09-11', video: import('./video/01.mp4')},

    {id: '02', name: 'Lily', date: '2018-09-19', video: import('./video/02.mp4')}

]