javascript - 对引用使用动态onClick

通过使用ref传递onClick =的动态属性可以使我回想起来：TypeError: _this.listReference is null listReference在我将在下面显示的组件之一中定义。

在组件＃1中

class Component1 extends Component {
    constructor(props){
        super(props)
        this.listReference= null;
}
//Returns
<div>
 <SomeComponent  list={(ref) => this.listReference= ref} />
 <Component2  onMarkerClick = {(index) => {
                    this.listReference.scrollTop = 48 * index
                                  }}/>

在组件＃2中

render() {
const {classes, driversStore, onMarkerCLick} = this.props

...

{driversStore.sortedSelectedOrders.map((order , index) => {
            return (
              <Component3
                onClick={ () => onMarkerClick(index)} />

在组件＃3中

  render() {
    const { onClick } = this.props;
    return (
      <div
        onClick={onClick}>

我希望在单击时触发滚动功能（如组件1中所述）。
提前致谢！

最佳答案

检查此示例。希望它能对您有所帮助！

const Component2 = (props) =>(
  <button onClick={props.onClick}>click me</button>
);

const SomeCompo = (props) =>(
  <div>SomeComponent</div>
);

class Component1 extends React.Component{
    listReference = React.createRef();

    render(){
      return(
        <div>
          <SomeCompo list={this.listReference}>reference</SomeCompo>
          <Component2 onClick={this.handleClick} />
        </div>
      );
    }

    handleClick = () => {

      if(this.listReference){
       this.listReference={scrollTop:100};
      }
      console.log(this.listReference)
    }
}

ReactDOM.render(<Component1/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

您应该在构造函数中执行以下操作，

this.listReference = React.createRef()