Javascript “如何制作父级/包装器组件”；“触发”；还是给孩子们打电话？
假设我有以下几点：Javascript “如何制作父级/包装器组件”；“触发”；还是给孩子们打电话？,javascript,reactjs,Javascript,Reactjs,假设我有以下几点： <Group> <Item mediaUrl="http://some/media/file.mp3" /> <Item mediaUrl="http://another/media/file.mp3" /> </Group> 我不明白的是，如何让Group在Item中启动一个方法，而不使用Redux之类的东西？（我试图让这些组件尽可能简单和纯粹）你不能也不应该这样做。但在少数情况下，如设置焦点或触发一些不会真正改变状
<Group>
<Item mediaUrl="http://some/media/file.mp3" />
<Item mediaUrl="http://another/media/file.mp3" />
</Group>
我不明白的是，如何让
GroupItemrender:function（）{
返回此项。_input=c}/>；
},
componentDidMount:function（）{
这是。_input.focus（）；
},
ref- 你不能也不应该这样做。但在少数情况下，如设置焦点或触发一些不会真正改变状态的东西，可能需要它。这个问题的关键是DOM还没有创建。这方面有一个例子
render:function（）{
返回此项。_input=c}/>；
},
componentDidMount:function（）{
这是。_input.focus（）；
},
refGroup componentDidMount() {
this.setState({
playlist: React.Children.map(this.props.children, t => t.props.id),
});
}
render() {
if (!this.props.children) {
console.error('Warning: TrackGroup must contain audio tracks');
return null;
}
const tracks = React.Children.map(this.props.children, (child, i) => {
return React.cloneElement(child, {
onTrackEnd: this.trackEnded,
playNext: this.state.playNext,
});
});
return <div>{tracks}</div>
}
componentDidMount（）{
这是我的国家({
播放列表：React.Children.map（this.props.Children，t=>t.props.id），
});
}
render（）{
如果（！this.props.children）{
console.error（'警告：轨迹组必须包含音频轨迹'）；
返回null；
}
const tracks=React.Children.map（this.props.Children，（child，i）=>{
返回React.cloneElement（子级{
onTrackEnd:this.trackEnded，
playNext:this.state.playNext，
});
});
返回{tracks}
}
当每个
项目组件将接收道具nextrops.playNext此.props.idGroup componentDidMount() {
this.setState({
playlist: React.Children.map(this.props.children, t => t.props.id),
});
}
render() {
if (!this.props.children) {
console.error('Warning: TrackGroup must contain audio tracks');
return null;
}
const tracks = React.Children.map(this.props.children, (child, i) => {
return React.cloneElement(child, {
onTrackEnd: this.trackEnded,
playNext: this.state.playNext,
});
});
return <div>{tracks}</div>
}
componentDidMount（）{
这是我的国家({
播放列表：React.Children.map（this.props.Children，t=>t.props.id），
});
}
render（）{
如果（！this.props.children）{
console.error（'警告：轨迹组必须包含音频轨迹'）；
返回null；
}
const tracks=React.Children.map（this.props.Children，（child，i）=>{
返回React.cloneElement（子级{
onTrackEnd:this.trackEnded，
playNext:this.state.playNext，
});
});
返回{tracks}
}
当每个
项目组件将接收道具nextrops.playNext此.props.id类组扩展了React.Component{
建造师（道具）{
超级（道具）
}
状态={
//初始状态。小心按下第一首歌曲上的“后退”按钮：p（显然可以改善这一点）
前任：-1，
电流：0，
下一个：1
}
handleEnd=（）=>{
//对第一首歌、最后一首歌等执行各种条件检查，并相应地编码。这过于简单，以线性方式进行。您可以将其外推到选择任何歌曲、后退或前进按钮等的其他方法中。
如果（…）{
这是我的国家({
上一个：上一个+=1，
电流：电流+=1，
下一个：下一个+=1
});
}
}
渲染（）{
让歌曲=this.props.songs；
让歌曲列表=歌曲。地图（（歌曲）=>{
if（song.index==this.state.current）{
返回(
);
}
否则{
返回(
);
};
}
返回(
{歌曲列表}
);
}
}
类项扩展了React.Component{
建造师（道具）{
超级（道具）
}
componentDidMount=（）=>{
如果（this.props.playing==1）{
这个。play（）；
};
}
播放=（）=>{
//播放url或其他内容中的音乐。
}
渲染（）{
//歌曲的一些图形表示。
}
}
someSongs = [...];
ReactDOM.render(
<Group songs={someSongs} />,
document.getElementById('...')
);
someSongs=[…]；
ReactDOM.render(
,
document.getElementById（“…”）
);
class Group extends React.Component {
constructor(props) {
super(props)
}
state = {
// Initial state. Be careful pressing the back button on the first song :p (Obviously improve this)
previous: -1,
current: 0,
next: 1
}
handleEnd = () => {
// Perform all sorts of condition checks for first song, last song, etc. and code accordingly. This is simplistic, proceeding in linear fashion. You can extrapolate this into other methods for selection of any song, back or forward button, etc.
if (...) {
this.setstate({
previous: previous += 1,
current: current += 1,
next: next +=1
});
}
}
render () {
let songs = this.props.songs;
let songList = songs.map((song) => {
if (song.index === this.state.current) {
return (
<Item playing=1 onEnd={this.handleEnd} mediaUrl={song.url} />
);
}
else {
return (
<Item playing=0 onEnd={this.handleEnd} mediaUrl={song.url} />
);
};
}
return (
<div>
{songList}
</div>
);
}
}
class Item extends React.Component {
constructor(props) {
super(props)
}
componentDidMount = () => {
if (this.props.playing === 1) {
this.play();
};
}
play = () => {
// Play the music from the url or whatever.
}
render () {
<div>
// Some graphical representation of song.
</div>
}
}
someSongs = [...];
ReactDOM.render(
<Group songs={someSongs} />,
document.getElementById('...')
);