滚动到反应列表视图中的选定元素

Question

我还没有设法使这项工作。我呈现我的物品清单，当前选中的物品获得“ref”属性。

class CityListItem extends React.Component { 
    render() { 
    const { selected, id, name } = this.props 
    return <div ref={selected && "selected" } style={{padding:10,borderBottom:"1px solid lightgray",fontWeight:selected && "bold"}}>{name}</div> 
    } 
} 

class Cities extends React.Component { 
    componentDidMount() { 
    this.refs.selected && this.refs.selected.scrollIntoView() 
    } 

    listItem(item) { 
    const selected = item.id == this.props.selected 
    return <CityListItem key={item.id} {...item} selected={selected}/> 
    } 

    render() { 
    const { cities, selected } = this.props 
    return <div> 
     <List items={cities} renderer={this.listItem.bind(this)}/> 
    </div> 
    } 
} 

它给我简单的组件不能有ref

Answer 1

阵营只允许在反应的组分裁判的错误。在你的情况下，<Cities>，<CistyListItem>或<List>。所以<div>的参考是不允许的。

简单的解决办法是在ref=...声明移到渲染CityListItem，如：

return <CityListItem 
    ref={selected && "selected" } 
    key={item.id} {...item} 
    selected={selected}/> 

也许这会工作。