Question

我目前正在尝试开发一个可以接收用户输入（即YouTube™视频网址）的网络应用，并输出该视频的iframe。我能用基本的HTML和JavaScript生成这个结果，但现在我必须将它转换为React我无法弄清楚我做错了什么。

以下是一些相关的代码。

app.js

var React = require('react');
var ReactDOM = require('react-dom');

var Header = React.createClass({
    render: function () {
        return (
            <header>
                 <h1>{this.props.title}</h1>
            </header>
        );
    }
});

var createIframeLink = function (link) {
    if (link.charAt(12) == 'y') {    //if the 13th character = y (youtube     videos)
        var number = link.substring(32);    //key # = from 33rd character on
        var embed = "https://www.youtube.com/embed/" + number;    //Add youtube link before key #
        return embed
    }
    else if (link.charAt(12) == 'o') {    //if the 13th character = o (vimeo videos)
        var number = link.substring(18);    //key # = from 19th character on
        var embed = "https://player.vimeo.com/video/" + number;    //Add vimeo link before key #
        return embed
    }
    else {}
};

var iframevideo = React.createClass({
    render: function() {
        return (
            <div id="iframe">
                <iframe id="iframe" src="this.props.embed" frameborder="0"></iframe>
            </div>
        )
    }
});

var iframeblock = React.createClass({
    render: function() {
        var link = this.state.link;
        return (
            <div className="form">
                <div>
                    <label>Principal:</label>
                    <input type="text" value={this.state.link} onChange={this.createIframeLink}/>
                </div>
            </div>
            <iframe id="iframe" src="this.props.embed" frameborder="0"></iframe>
        )
    }
});

var App = React.createClass({
    render: function () {
        return (
            <div>
                <Header title="Vidvision"/>
                <iframeblock/>
            </div>
        );
    }
});

ReactDOM.render(<App/>,  document.getElementById("app"));

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700'    rel='stylesheet' type='text/css'>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="build/app.bundle.js"></script>
</body>
</html>

当我运行我的应用程序时，我收到错误：

（SyntaxError：......相邻的JSX元素必须包装在一个封闭的标签中（48:12）。

以下是适用的纯HTML和JavaScript代码：

<div class="myIframe">
    <iframe id="iframe" src="" frameborder="0" &fs=0></iframe>
</div>

<script type="text/javascript">
function createYouTubeEmbedLink (link) {
    link = document.getElementById('link').value;
    if (link.charAt(12) == 'y') {    //if the 13th character = y (youtube  videos)
        var number = link.substring(32);    //key # = from 33rd character on
        var embed = "https://www.youtube.com/embed/" + number;    //Add youtube link before key #
        document.getElementById('iframe').src = embed;
    }
    else if (link.charAt(12) == 'o') {    //if the 13th character = o (vimeo videos)
        var number = link.substring(18);    //key # = from 19th character on
        var embed = "https://player.vimeo.com/video/" + number;    //Add vimeo link before key #
        document.getElementById('iframe').src = embed;
    }
    else {}
}
</script>

Answer 1

您收到的错误是因为Component iframeblock无法返回两个元素，因此您需要将<div>和<iframe>包含在另一个<div>内}}

var iframeblock = React.createClass({
    render: function() {
        var link = this.state.link;
        return (
            <div>
                <div className="form">
                    <div>
                        <label>Principal:</label>
                        <input type="text" value={this.state.link} onChange={this.createIframeLink}/>
                    </div>
                </div>
                <iframe id="iframe" src="this.props.embed" frameborder="0"></iframe>
            </div>
        );
    }
});

如何使用React.js获取用户输入（youtube视频链接）并将其嵌入iframe？

1 个答案: