Question

我有一个动态调查表生成器。我将所有问题的ref对象保存到化简器的数组中。我想访问所有其他页面的引用，以将用户滚动到特定问题。我的问题是存储的对象没有可用于滚动的offsetTop。

使用ref的回调与没有使用之间没有区别。

class Question extends React.Component<QuestionProps,{}>{
    myRef:any;
    constructor(props:QuestionProps){
        super(props);
       ...
        this.myRef = React.createRef();   // Create a ref object 
    }
...
render(){
        const {question,activeQuestionId} = this.props;
        const active = activeQuestionId === question.id;
        return <Row ref={this.myRef} className="QuestionBox" style={{opacity:active?1:0.2}} onClick={this.handleQuestionClick}>

在减速器中，我有：

case SET_QUESTION_ACTIVE:
        console.log(state);
        const currentRef = state.refs.filter(c=> c.questionId === action.payload.questionId);
        if (currentRef.length > 0) {
          const currentQuestionRef = currentRef[0].ref;
          window.scrollTo(0, currentQuestionRef.current.offsetTop);
        }

currentQuestionRef.current是我们可以在控制台中看到的正确对象。但是currentQuestionRef.current.offsetTop是不确定的！

Answer 1

您应将ref与诸如<div>，<input/>和...之类的react组件一起使用：

    render(){
     return(
    <div ref={this.myRef}>
     //code comes here
    <div/>
 );
}

或者您可以将ref作为prop发送到另一个组件中。

在reducer中存储的ref对象，不具有offsetTop属性

1 个答案: