React dangerouslySetInnerHTML для рендеринга iframe youtube встраивания из реквизита?

Question

У кого-нибудь есть идея, как получить этот атрибут prop в stringToHTML в React? Заранее спасибо!

var Video = React.createClass({ 

getDefaultProps: function getDefaultProps() { 

     return propsObj; 
}, 

createMarkup: function() { 

    return {__html: {this.props.video}}; 
}, 

    render: function() { 
    return (

     <div className="video-container no-controls" id="player" dangerouslySetInnerHTML={createMarkup()} /> 
    ); 
    } 
}); 

Answer 1

Существует причина, по которой HTML-инъекция в React имеет такой громоздкий API: его использование сильно не рекомендуется.

Непонятно, почему вы хотели бы использовать HTML-инъекцию для чего-то столь же простого, как и для YouTube iframe. Разметка для него вполне предсказуема.

Я настоятельно рекомендую вам переписать его в JSX. Вот код для компонента YouTube, который я использовал в недавнем проекте.

const YouTubeVideo = ({ id }) => (

    <div className="youtube-wrapper"> 
     <div className="youtube"> 
      <iframe 
       className="youtube-frame" 
       src={`https://www.youtube.com/embed/${id}?autoplay=1`} 
       allowFullScreen 
      /> 
     </div> 
    </div> 

);