Рендеринг iframe в React - PullRequest
Новая
       12

Рендеринг iframe в React

0 голосов
/ 21 мая 2018

У меня есть следующий компонент: 

export default class VideoArchiveContent extends React.Component {
  constructor() {
    super();
    this.state = {
      videos: []
    }
  } 
  componentDidMount() {
    this.VideosTracker = Tracker.autorun(() => {
      Meteor.subscribe('videos');
      const videos = Videos.find().fetch();
      this.setState({ videos })
    });
  };
  componentWillUnmount() {
    this.VideosTracker.stop();
  };
  renderVideos = () => {
    return this.state.videos.map((video) => {
      return <div key={video._id}>{video.embed}</div>
    });
  };
  render() {
    return (
      <div>
        {this.renderVideos()}
      </div>
    )
  }
};

Я ожидаю, что iframe отобразится на экране.Рендеринг - это строка iframe.

Если поместить iframe в оператор return следующим образом: 

return (
  <div>
    <iframe src="https://player.vimeo.com/video/270962511" width="500" height="281" frameborder="0" allowfullscreen></iframe>
  </div>
)

iframe рендерится так, как ожидалось.

Есть ли решение?

1 Ответ

0 голосов
/ 21 мая 2018

Я не уверен, откуда взялся iframe, поскольку я не вижу его в вашем коде как тег HTML, поэтому я предполагаю, что он поступает с сервера в виде строки.Вероятно, внутри video.embed.
Если это так, то вам нужно использовать атрибут dangerouslySetInnerHTML, чтобы отобразить это: 

return <div key={video._id} dangerouslySetInnerHTML={{__html:video.embed}} />

Используйте его с осторожностью, я советую прочитать об этом в DOCS первый.

Рабочий пример: 

const tweetersIframe = '<iframe src="https://platform.twitter.com/widgets/tweet_button.html" />'
const App = () => (
  <div dangerouslySetInnerHTML={{ __html: tweetersIframe}}>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
...