javascript - 将动态 onClick 与 ref 一起使用

Question

使用 ref 传递动态属性 onClick= do something 返回: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 中所述)。 提前致谢!

Answer 1

Check this example. Hope it can help you!

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()