Question

为了允许我的parent component（JsonFetcher）访问我的child component（Display）中的值，我尝试使用刚刚发布的createRef() API这个补丁16.3

关注＆＃34;在类组件中添加参考＆＃34; this document中的示例，这是我在代码中尝试的内容：

class JsonFetcher extends Component {
    constructor(props) {
        super(props);
        this.child = React.createRef();
        this.state = {
            data: [],
        }
    }

    componentDidMount() {   
        this.updateContent(this.props.mainUrl)
    }

    updateContent(mainUrl){
        fetch(mainUrl)
            .then((responseJsonAnyUrl) => responseJsonAnyUrl.json())
            .then((responseJsonAnyUrl) => {
                this.setState({
                    mainUrl: mainUrl,
                    jsonObject: responseJsonAnyUrl
                },
                function () {
                    this.timeout = setTimeout(
                        function(){
                            //let ind = this.child.current.getCurrentIndex
                            //tyring to get values from child...
                            //if index === length-1
                                this.updateContent(mainUrl)
                            //else    
                            //retry this function in 5 seconds
                            // 
                        }.bind(this, mainUrl)
                        ,
                        20000)
                }.bind(this))
            })
    }

    interpretJson() {
        /*
        *some code
        */            
        return(
            <Display content={contentListArray} ref={this.child}/>
        )
    }

    render() {
        if(this.state.jsonObject){
            return (
                <div>
                    <div> {this.interpretJson()} </div>
                </div>
            )
        }else
            return(
                null
            )                
    }
}

所以，我在构造函数中创建了ref，并在child component方法的末尾将其与Display interpretJson()相关联，然后我尝试了在我的timeOut()函数中使用子方法。但是我收到以下错误：

＆＃34; TypeError：无法读取属性＆＃39; getCurrentIndex＆＃39; of null＆＃34;

我做错了什么，不让我调用子方法，所以我可以模拟我评论过的伪代码？

（编辑）备注：

我的子组件Display不是无状态组件，它是a 类。
我已经尝试在渲染中调用<Display>而不是问题依然存在。

Answer 1

使用箭头功能将此方法绑定到类。这样，this.child中的 this 将绑定到类组件

interpretJson = () => {
    /*
    *some code
    */            
    return(
        <Display content={contentListArray} ref={this.child}/>
    )
}

如果上述答案无效，请执行此操作

 constructor(props) {
        super(props);
        this.interpretJson = this.interpretJson.bind(this);//bind function to class
        this.child = React.createRef();
        this.state = {
            data: [],
        }

 }
 interpretJson() {
        /*
        *some code
        */            
        return(
            <Display content={contentListArray} ref={this.child}/>
        )
    }

Answer 2

我也遇到了这个问题（我正在使用打字稿）

private modal = React.createRef<HTMLDivElement>()

// ...

public componentDidMount() {
  console.log(this.modal)
}

// ...

public render() {
// ...
  <div ref={this.modal} className="modal fade"
  // ...

输出。从头开始为null，然后过一会儿便被填充：

问题在于，在渲染方法中，我提早退出，未达到引用代码

public render() {
  const { data } = this.state

  // here we return early, ref bellow is not reached
  // and in componentDidmount we can't rely on this.modal.current
  // this.modal.current will be populated only if data is not null
  if (data === null) { return null }

  return (
    <div ref={this.modal} className="modal fade"
    // ...

以下示例中的示例存在相同问题

示例：https://codesandbox.io/s/ymvxj5pqmx

React- createRef（）Api - this.child.current为null

2 个答案: