Question

我有一个示例，可以访问vimeo频道的所有视频，并且可以正常运行，但是当我尝试将所有视频作为vimeo播放器的iframe列出时，它只会返回iframe html代码。这是我所拥有的：

从'react'导入React，{组件}; 从“ 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;

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

<iframe src="https://player.vimeo.com/video/28028960?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=132884" width="640" height="360" frameborder="0" title="Gastação TV: Link's Death - Dorkly Bits (LEGENDADO)" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我在这里做错了什么？

Answer 1

您可能需要调用dangerouslySetInnerHTML才能停止将html视为字符串的反应

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

如何在React中显示来自vimeo播放器的视频的iframe？

1 个答案: