2016-03-02 131 views
0

我還沒有設法使這項工作。我呈現我的物品清單,當前選中的物品獲得「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

回答

0

陣營只允許在反應的組分裁判的錯誤。在你的情況下,<Cities><CistyListItem><List>。所以<div>的參考是不允許的。

簡單的解決辦法是在ref=...聲明移到渲染CityListItem,如:

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

也許這會工作。

+0

這確實是錯誤!謝謝! – philk