Question

我正在使用一些库，它返回给我html元素的Dom对象。所以我想把这个dom对象设置为reactjs中的状态并像这样渲染到UI：

this.setState({
  video: videoElement
})
render () {
  return (
         <div>{this.state.video}</div>
         )
       }

因为视频不是React元素。所以我收到了一个错误：

invariant.js:44 Uncaught (in promise) Error: Objects are not valid as a React child (found: [object HTMLVideoElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Video`.

有没有办法将Dom Object转换为React元素？

Answer 1

如果this.state.video是视频流，那么请使用JSX中的html5视频元素。

render() {
    return (
        <div>
           <video width="400" controls>
               <source src={this.state.video} type={this.state.video_format} />
           </video>
       </div>
    )
}

将Dome javascript对象转换为反应元素

1 个答案: