[英]React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?
[英]React Child component will mount then unmount after calling parent function to set parent state
我有两个部分,父母和孩子。 父母跟踪音频播放器组件(孩子是播放器)以及播放器正在播放哪个片段,例如片段1可能是前34秒,然后是第二片段,直到215秒,依此类推。
我的父级组件呈现Player组件,并将绑定函数传递给Player,以便Player可以使用播放器的当前时间更新父级,以便父级可以确定应突出显示哪个段。
问题是:(1)(主要问题)一旦单击播放按钮并播放,或者用户跳过第一个分段中断,然后父级的状态会更新,但播放器将被卸载,从而导致MediaElement被删除; (2)(次要问题),在最初加载页面时,先卸载Player,然后再进行父级安装,然后再卸载并再次进行Player的安装。 我相信他们有关系。
父母:
import React from 'react'
import shortid from 'shortid'
import Frame from '../../layout/Frame'
import Box from '../../layout/Box'
import Flex from '../../layout/Flex'
import G1 from '../../layout/G1'
import Player from '../../parts/Player'
import BriefingTitle from './BriefingTitle'
import {assoc, lensPath, set, view} from 'ramda'
import {createMarkup} from '../../../lib/tools'
class Briefing extends React.Component {
constructor({briefing}) {
super()
const segments = briefing.segments.map(assoc('playing', false))
console.log('segments:', segments)
this.state = {
briefing,
segments
}
this.parentMonitor = this.updateSegments.bind(this)
}
updateSegments(time) {
console.log('time:', time)
const firstPlayingLens = lensPath([0, 'playing'])
if (time > 36 && !view(firstPlayingLens, this.state.segments)) {
this.setState(set(firstPlayingLens, true, this.state.segments))
}
}
componentDidMount() {
console.log('Briefing mounted')
}
componentWillUnmount() {
console.log('Briefing will unmount')
}
render() {
const {briefing, segments} = this.state
return (
<Frame pb={['0px', 3]}>
<G1>
<Flex pt={[2, 3]} direction={['column', 'row']}>
<Box mt={[2, 'm']} mr={2} shrink={0} grow={2} order={[2, 1]}>
<BriefingTitle><span dangerouslySetInnerHTML={createMarkup(briefing.title)} /></BriefingTitle>
<Box mt={0} pt={0} bt>
<Player key={'briefing_'+briefing.id} url={briefing.audioFile} type="audio/mp3" duration={briefing.duration} parentMonitor={this.parentMonitor}>Play Full Episode</Player>
</Box>
<Box mt={0} pt={0} bt>
{briefing.segments.map(s => s.playing ? <p><strong>{s.title}</strong></p> : <p>{s.title}</p>)}
</Box>
</Box>
</Flex>
</G1>
</Frame>
)
}
}
export default Briefing
玩家:
import React from 'react'
import styled from 'styled-components'
import Flex from '../../layout/Flex'
import Box from '../../layout/Box'
import 'mediaelement'
import 'mediaelement/build/mediaelementplayer.min.css'
import 'mediaelement/build/mediaelement-flash-video.swf'
import 'mediaelement-plugins/dist/skip-back/skip-back.min.js'
import 'mediaelement-plugins/dist/skip-back/skip-back.css'
import {rem} from '../../../lib/tools'
import {type} from '../../../designSystem'
const StyledSpan = styled.span`
font-family: ${type.family.default};
font-size: ${rem(type.size.s0)};
font-weight: ${type.weight.bold};
line-height: ${type.lineHeight.meta};
`
class Player extends React.Component {
constructor(props, {
inverse = props.inverse ? true : false
}) {
super()
this.state = {
inverse,
children: props.children,
player: null
}
}
monitor(media) {
this.props.parentMonitor(media.getCurrentTime())
setTimeout(this.playing.bind(this), 200)
}
playing() {
this.monitor(this.state.player)
}
success(media, node, instance) {
// successfully loaded!
const playEvent = e => this.playing()
media.addEventListener('playing', playEvent)
media.removeEventListener('pause', playEvent)
media.removeEventListener('ended', playEvent)
}
error(media) {
// failed to load
}
componentDidMount() {
console.log('Player mounted')
const {MediaElementPlayer} = global
if (MediaElementPlayer) {
const options = {
features: ['skipback'],
useDefaultControls: true,
pluginPath: './build/static/media/',
skipBackInterval: 31,
skipBackText: 'Rewind 30 seconds',
success: (media, node, instance) => this.success(media, node, instance),
error: (media, node) => this.error(media, node)
}
this.setState({player: new MediaElementPlayer('player_'+this.props.key, options)})
}
}
componentWillUnmount() {
console.log('Player will unmount')
if (this.state.player) {
this.state.player.remove()
this.setState({player: null})
}
}
shouldComponentUpdate() {
return false
}
render() {
return (
<Flex justify={this.state.children ? 'space-between' : ''} align="center">
<Flex align="center">
<audio id={'player_'+this.props.key} width={this.props.width || 400}>
<source src={this.props.url} type={this.props.type} />
</audio>
</Flex>
</Flex>
)
}
}
export default Player
我正在使用MediaElement和React 15.5.4。
随着@ Hoyen的帮助弄清楚,重新渲染是由父母的状态变化引起的,我想通了,我需要独立的state
父从state
的段。 我将这些片段放入自己的子类中,并在播放器时间更新时从父类中调用它们。
请注意(在父级中)对this.refs.segments.updateSegments
的调用和父级段渲染中的ref
属性, <Segments ref="segments" key={"bSegments"+this.state.briefing.id} segments={segments}></Segments>
可以调用子组件。
上级:
import React from 'react'
import shortid from 'shortid'
import Frame from '../../layout/Frame'
import Box from '../../layout/Box'
import Flex from '../../layout/Flex'
import G1 from '../../layout/G1'
import Player from '../../parts/Player'
import Segments from '../../parts/Player/Segments'
import BriefingTitle from './BriefingTitle'
import {assoc, lensPath, set, view} from 'ramda'
import {createMarkup} from '../../../lib/tools'
class Briefing extends React.Component {
constructor({briefing}) {
super()
const segments = briefing.segments.map(assoc('playing', false))
console.log('segments:', segments)
this.state = {
briefing,
segments
}
this.parentMonitor = this.updateSegments.bind(this)
}
updateSegments(time) {
this.refs.segments.updateSegments(time)
}
componentDidMount() {
console.log('Briefing mounted')
}
componentWillUnmount() {
console.log('Briefing will unmount')
}
render() {
const {briefing, segments} = this.state
console.log('render Briefing')
return (
<Frame pb={['0px', 3]}>
<G1>
<Flex pt={[2, 3]} direction={['column', 'row']}>
<Box mt={[2, 'm']} mr={2} shrink={0} grow={2} order={[2, 1]}>
<BriefingTitle><span dangerouslySetInnerHTML={createMarkup(briefing.title)} /></BriefingTitle>
<Box mt={0} pt={0} bt>
<Player key={'briefing_'+briefing.id} url={briefing.audioFile} type="audio/mp3" duration={briefing.duration} parentMonitor={this.parentMonitor}>Play Full Episode</Player>
</Box>
<Segments ref="segments" key={"bSegments"+this.state.briefing.id} segments={segments}></Segments>
</Box>
</Flex>
</G1>
</Frame>
)
}
}
export default Briefing
玩家:
import React from 'react'
import styled from 'styled-components'
import Flex from '../../layout/Flex'
import Box from '../../layout/Box'
import 'mediaelement'
import 'mediaelement/build/mediaelementplayer.min.css'
import 'mediaelement/build/mediaelement-flash-video.swf'
import 'mediaelement-plugins/dist/skip-back/skip-back.min.js'
import 'mediaelement-plugins/dist/skip-back/skip-back.css'
import {rem} from '../../../lib/tools'
import {type} from '../../../designSystem'
const StyledSpan = styled.span`
font-family: ${type.family.default};
font-size: ${rem(type.size.s0)};
font-weight: ${type.weight.bold};
line-height: ${type.lineHeight.meta};
`
class Player extends React.Component {
constructor(props, {
inverse = props.inverse ? true : false
}) {
super()
this.state = {
inverse,
children: props.children,
player: null
}
}
monitor(media) {
this.props.parentMonitor(media.getCurrentTime())
setTimeout(this.playing.bind(this), 200)
}
playing() {
this.monitor(this.state.player)
}
success(media, node, instance) {
// successfully loaded!
const playEvent = e => this.playing()
media.addEventListener('playing', playEvent)
media.removeEventListener('pause', playEvent)
media.removeEventListener('ended', playEvent)
}
error(media) {
// failed to load
}
componentDidMount() {
console.log('Player mounted')
const {MediaElementPlayer} = global
if (MediaElementPlayer) {
const options = {
features: ['skipback'],
useDefaultControls: true,
pluginPath: './build/static/media/',
skipBackInterval: 31,
skipBackText: 'Rewind 30 seconds',
success: (media, node, instance) => this.success(media, node, instance),
error: (media, node) => this.error(media, node)
}
this.setState({player: new MediaElementPlayer('player_'+this.props.key, options)})
}
}
componentWillUnmount() {
console.log('Player will unmount')
if (this.state.player) {
this.state.player.remove()
this.setState({player: null})
}
}
shouldComponentUpdate() {
return false
}
render() {
console.log('render player')
return (
<Flex justify={this.state.children ? 'space-between' : ''} align="center">
<Flex align="center">
<audio id={'player_'+this.props.key} width={this.props.width || 400}>
<source src={this.props.url} type={this.props.type} />
</audio>
</Flex>
</Flex>
)
}
}
export default Player
细分:
import React from 'react'
import Box from '../../layout/Box'
import {lensPath, set, view} from 'ramda'
class Segments extends React.Component {
constructor(props) {
super()
this.state = {
segments: props.segments
}
}
updateSegments(time) {
console.log('time:', time)
const firstPlayingLens = lensPath([0, 'playing'])
if (time > 36 && !view(firstPlayingLens, this.state.segments)) {
const modifiedSegments = set(firstPlayingLens, true, this.state.segments)
console.log('modifiedSegments:', modifiedSegments)
this.setState({segments: modifiedSegments})
}
}
render() {
console.log('render Segments')
return (
<Box mt={0} pt={0} bt>
{this.state.segments.map(s => s.playing ? <p><strong>{s.title}</strong></p> : <p>{s.title}</p>)}
</Box>
)
}
}
export default Segments
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.