我需要在几行中显示视频(卡片)的缩略图,并重点关注第一个缩略图。我使用嵌套地图进行了显示。该代码基本上迭代视频数组并返回多行视频。
我们如何关注第一个渲染的元素?我认为我们需要获得第一个要聚焦的元素的引用。但是我们如何在这里设置 ref 并在另一个函数中引用它呢?
const CategoryGrid = props => {
return (
<HotKeys handlers={handlers}>
<div className="grid-container">
<p className="title"> {props.title.toUpperCase()} </p>
<div className="grid">
{
props.videos.map((rowvideos,index) => {
var rowVideoArr = [];
rowvideos.map((video,key)=>{
rowVideoArr.push(<div key={video.id} className="fleft card-container grow">
<Card key={video.id} title={video.name} background={video.thumbnailUrl}/>
</div>)
})
return(<div className="row" key={index}>{rowVideoArr}</div>)
})
}
</div>
</div>
</HotKeys>
);
}
也许使用查找表对象或数组,并按索引(或 ID)存储所有引用。
然后,当组件被安装时,您可以在第一个组件上触发焦点事件(或通过键或 id 触发任何其他组件)。
带输入的简单示例:
const videos = [
{ name: 'video 1' },
{ name: 'video 2' },
{ name: 'video 3' },
];
class App extends React.Component {
constructor(props) {
super(props);
this.videoRefs = [];
}
componentDidMount() {
this.videoRefs[0] && this.videoRefs[0].focus();
}
render() {
return (
<div >
{
videos.map((video, index) => (
<input
key={index}
value={video.name}
ref={ref => this.videoRefs[index] = ref}
/>
))
}
</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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)