Javascript 如何在React中显示vimeo player视频的iFrame？

我有一个例子，我访问了vimeo频道的所有视频，这是可行的，但当我尝试将所有视频列为vimeo播放器的iframe时，它只返回iframe html代码。以下是我所拥有的：

从“React”导入React，{Component}； 从“axios”导入axios

    const CLIENT_IDENTIFIER = "**********";
    const CLIENT_SECRET = "***********";


            class Apicall extends Component {

              state = {
                  vimeo: []
              };    

             async getVideosForChannel(access_token) {
            const { data } = await axios.get(
              "https://api.vimeo.com/channels/180097/videos",
               {
                  headers: {
                    Authorization: `Bearer ${access_token}`
                  }
               }
            );

          this.setState({ vimeo: data.data });
      }


         async componentDidMount() {
            if (!CLIENT_IDENTIFIER || !CLIENT_SECRET) {
           return alert("Please provide a CLIENT_IDENTIFIER and CLIENT_SECRET");
            }

         try {
            const { data } = await axios.post(
                 "https://api.vimeo.com/oauth/authorize/client",
              { grant_type: "client_credentials" },
            {
            auth: {
               username: CLIENT_IDENTIFIER,
               password: CLIENT_SECRET
             }
           }
          );

      this.getVideosForChannel(data.access_token);
    } catch (error) {
      if (error.response.status === 429) {
        alert(
          "The Vimeo api has received too many requests, please try again in an hour or so"
        );
      }
    }
  }





render() {
    return (
         <div className="container">
           <h1></h1>
           <ul>
            {this.state.vimeo.map(({ resource_key, embed, pictures}) => (
                <li key={resource_key}>
                    {embed.html}
                </li>
            ))}
           </ul>
         </div>
    );
   }
 }

   export default Apicall;

const CLIENT_IDENTIFIER=“**********”；
const CLIENT_SECRET=“*************”；
类Apicall扩展组件{
状态={
维梅奥：[]
};    
异步getVideosForChannel（访问令牌）{
const{data}=wait axios.get(
"https://api.vimeo.com/channels/180097/videos",
{
标题：{
授权：`Bearer${access\u token}`
}
}
);
this.setState（{vimeo:data.data}）；
}
异步组件didmount（）{
如果（！客户机_标识符| |！客户机_机密）{
返回警报（“请提供客户端标识符和客户端密码”）；
}
试一试{
const{data}=wait axios.post(
"https://api.vimeo.com/oauth/authorize/client",
{授权类型：“客户端凭据”}，
{
认证：{
用户名：客户端标识符，
密码：CLIENT_SECRET
}
}
);
这个.getVideosForChannel（data.access_令牌）；
}捕获（错误）{
if（error.response.status==429）{
警觉的(
“Vimeo api收到的请求太多，请在一小时左右重试”
);
}
}
}
render（）{
返回(

{this.state.vimeo.map（{resource_key，embed，pictures}）=>(

{embed.html}

))}

);
}
}
全部导出默认值；

以下代码导致将其输出到屏幕：

---

我做错了什么

您可能需要调用

dangerlysetinerhtml

以停止将html作为字符串处理

<li
  key={resource_key}
  dangerouslySetInnerHTML={{__html: embed.html}}
/>