Reactjs 反应声音嵌入错误

我正在尝试嵌入一个声音云轨道。我已经将ReactSoundcloud导入页面，现在在返回中使用它之后，我得到了这些错误。我做错了什么？（注意：url值作为占位符用于测试）

我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSoundcloud from 'react-soundcloud-embed';
import ArtistList from '../../data/artistlist.jsx';



let artistlist2017 = ArtistList.data;
// Artist Section

class Artists extends React.Component{
  render(){

    var artistPrint = artistlist2017.map(function(artist, index){
      return (
        <div className="each_artist" key={index}>
          <img
            src={artist.src} alt=""
          />
          <h1>{artist.name}</h1>
          <h3>{artist.description}</h3>
          <ReactSoundcloud url={"https://soundcloud.com/icebound/dusty-breaks-at-the-bottom-of-the-random-crates"}/>
        </div>
      );
    });
    return (
      <div>
        <div className="artist_block">
          <div>
            <div className="rotate_left_header">
              <h2>
                2017 Featured Artists
              </h2>
            </div>

            <div className="artists">{artistPrint}</div>
          </div>
        </div>
      </div>
    );
  }
};

export default Artists;

从“React”导入React；
从“react dom”导入react dom；
从“react soundcloud嵌入”导入react soundcloud；
从“../data/ArtistList.jsx”导入ArtistList；
让ArtistList 2017=ArtistList.data；
//艺术家组
类。组件{
render（）{
var artistPrint=artistlist2017.map（函数（艺术家，索引）{
返回(
{艺术家名称}
{艺术家描述}
);
});
返回(
2017年精选艺术家
{artistPrint}
);
}
};
导出默认艺术家；

我将soundcloud组件更改为

class ReactSoundcloud extends React.Component 
{

    constructor()
    {
        super();
        this.props = 
        { 
            width: "100%",
            height: "450px",
            url: "https://soundcloud.com/icebound/dusty-breaks-at-the-bottom-of-the-random-crates",
            autoPlay: false,
            hideRelated: false,
            showComments: true,
            showUser: true,
            showReposts: false,
            visual: true,
            color: "ff5500"
        };
    }

    render() {
        const { url, width, height, autoPlay, hideRelated, 
                showComments, showUser, showReposts, visual, color } = this.props;

        var src = visual ? 
                    `https://w.soundcloud.com/player/?url=${url}&auto_play=${autoPlay}&hide_related=${hideRelated}&show_comments=${showComments}&show_user=${showUser}&show_reposts=${showReposts}&visual=${visual}` :
                    `https://w.soundcloud.com/player/?url=${url}&color=${color}&auto_play=${autoPlay}&hide_related=${hideRelated}&show_comments=${showComments}&show_user=${showUser}&show_reposts=${showReposts}`;

        return (
            <iframe 
            width={ width } 
            height={ visual ? height : "auto" } 
            scrolling="no" 
            frameBorder="no" 
            src={ src } />
        );
    };
}
module.exports = ReactSoundcloud;

类ReactSoundcloud扩展React.Component
{
构造函数（）
{
超级（）；
此.props=
{ 
宽度：“100%”，
高度：“450px”，
url:“https://soundcloud.com/icebound/dusty-breaks-at-the-bottom-of-the-random-crates",
自动播放：错误，
隐藏：错误，
评论：没错，
是的，
showReposts:false，
视觉：对，
颜色：“ff5500”
};
}
render（）{
常数url、宽度、高度、自动播放、隐藏相关、，
showComments、showUser、showReposts、visual、color}=this.props；
var src=可视？
`https://w.soundcloud.com/player/?url=${url}&；自动播放=${autoPlay}&；隐藏相关=${hideRelated}&；显示注释=${showComments}&；显示用户=${showUser}&；显示报告=${showReposts}&；视觉=${visual`}:
`https://w.soundcloud.com/player/?url=${url}&；color=${color}&；auto_play=${autoPlay}&；hide_related}&；show_comments=${showComments}&；show_user=${showUser}&；show_reposts=${showReposts}；
返回(
);
};
}
module.exports=ReactSoundcloud；

若你们在源代码中查找，那个么会有一点差异

第一次使用静态defaultProps={给我一个浏览错误， 源frameBorder=“否”中的第二个frameBorder=“否”

我的手机测试不太好，但音乐现在在我的网页上播放！！：）

嗯，我不知道为什么会出现警告

'警告：ReactSoundcloud（…）：在

ReactSoundcloud

中调用super（）时，请确保传递与组件构造函数相同的道具。'