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')}
]