Scroll to the selected element in a react listview
<p>I have not managed to make this work. I render my list of items and the item that is currently selected gets a "ref" property.</p>

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

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

  listItem(item) {
    const selected = item.id == this.props.selected
    return &lt;CityListItem key={item.id} {...item} selected={selected}/&gt;
  }

  render() {
    const { cities, selected } = this.props
    return &lt;div&gt;
      &lt;List items={cities} renderer={this.listItem.bind(this)}/&gt;
    &lt;/div&gt;
  }
}
</code></pre>

<p>It gives me the error that simple components cannot have <code>ref</code></p>