如何获取使用 .map 呈现的第一个元素的 ref? [英] How to get the ref of the first element that's rendered with .map?

问题描述

我需要在多行中显示视频(卡片)的缩略图，并专注于第一个缩略图.我使用嵌套地图进行了显示.该代码基本上迭代视频数组并返回多行中的视频.

我们如何专注于呈现的第一个元素?我认为我们需要获取第一个要关注的元素的 ref.但是我们如何在这里设置 ref 并在另一个函数中引用它?

const CategoryGrid = props =>{返回 (<HotKeys handlers={handlers}><div className="grid-container"><p className="title">{props.title.toUpperCase()} </p><div className="网格">{props.videos.map((rowvideos,index) => {var rowVideoArr = [];rowvideos.map((video,key)=>{rowVideoArr.push(<div key={video.id} className="fleft card-container grow"><卡片密钥={video.id} title={video.name} background={video.thumbnailUrl}/></div>)})return(<div className="row" key={index}>{rowVideoArr}</div>)})}

</热键>);}

解决方案

也许可以使用查找表对象或数组，并通过索引(或 id)将所有引用存储在那里.
然后当组件挂载时，您可以在第一个(或任何其他通过 key 或 id 的)上触发 focus 事件.

带输入的简单示例:

const 视频 = [{名称:'视频1'}，{名称:'视频2'}，{名称:'视频3'}，];类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.videoRefs = [];}componentDidMount() {this.videoRefs[0] &&this.videoRefs[0].focus();}使成为() {返回 (<div >{视频.map((视频，索引)=>(<输入键={索引}值={video.name}参考={参考=>this.videoRefs[index] = ref}/>))}

);}}ReactDOM.render(, 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>

I have a requirement to show thumbnails of videos(cards) in several rows and focus on the very first thumbnail. I did the display using Nested Map. The code basically iterates over a videos array and returns videos in several rows.

How do we focus on the first element that renders? I think we need to get ref of the first element to focus. But how do we set ref here and reference it in another function?

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>
  );
}

解决方案

Maybe use a lookup table object or an array and store all the refs there by their index (or id).
Then when the component is mounted, you can trigger the focus event on the first one (or any other one by the key or id).

Simple example with inputs:

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>

这篇关于如何获取使用 .map 呈现的第一个元素的 ref?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！