HTML <source> 标签上的 Webpack JSX 错误

Question

我正在构建一个使用<video> 标签的ReactJS 组件。我在<source> 标签中得到了Webpack SyntaxError。我相信 Webpack 认为我需要关闭 <source> 但在我在 MDN docs 中看到的示例中，我相信我正确地遵循了 HTML：

前：

<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>

组件：

class IntroVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div>
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4">
                </video>
            </div>
        );
    }
}

错误：

ModuleBuildError in Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js: Expected corresponding JSX closing tag for <source> (61:4)
    <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
        <source src={ this.props.introVideo } type="video/mp4">
    </video>
</div>
);}

完整跟踪：

webpack_loader.exceptions.WebpackError: 
            ModuleBuildError in 
            Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js: Expected corresponding JSX closing tag for <source> (61:4)
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4">
                </video>
            </div>
        );
    }
    at Parser.pp.raise (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1378:13)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4272:12)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30)
    at Parser.pp.jsxParseElement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4291:15)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4303:21)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:822:26)
    at Parser.parseParenAndDistinguishExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3876:26)
    at Parser.pp.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:708:19)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4305:22)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:324:19)
    at Parser.pp.parseReturnStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2030:26)
    at Parser.pp.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1818:19)
    at Parser.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3507:22)
    at Parser.pp.parseBlockBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2208:21)
    at Parser.pp.parseBlock (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2189:8)
    at Parser.pp.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1125:22)
    at Parser.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3494:20)
    at Parser.pp.parseMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1094:8)
    at Parser.parseClassMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3735:12)

Answer 1

错误告诉你：

<source> 的预期对应 JSX 结束标记

<source src={ this.props.introVideo } type="video/mp4">

未关闭。应该是

<source src={ this.props.introVideo } type="video/mp4" />

在HTML中不需要关闭，但是你写的是JSX，需要显式打开和关闭。