Question

我有一个动态创建的React元素列表，这些元素是通过在render函数中运行一个方法创建的：

surveyFileErrors.map((errorData, i) => {
 return arr.push(<FileErrorCard ref={} key={errorData.id} errorData={errorData} />);
}

我尝试为每个元素创建一个Ref，以便我可以使用向上和向下箭头将焦点更改为元素。这是我的构造函数：

constructor(props) {
    super(props);
    this.state = {
      fileErrorList: [],
      activeList: null,
      activePage: 1,
    };
    this.errorRefs = [];
}

我试图在React 16.3中使用新的React.createRefs（），但它给出的示例显示我需要在构造函数中使用React.createRefs，它将在我开始创建上面的列表之前执行。此列表仅在操作检索错误列表后创建。我可以提供更多信息，但我不想写太长篇文章。

Answer 1

这就是我的工作方式，希望对您有所帮助：

const refObj = {};
surveyFileErrors.map((errorData, i) => {
     refObj[i] = React.createRef();
     return arr.push(<FileErrorCard ref={refObj[i]} key={errorData.id}
                     errorData={errorData} />);
    }

创建参考的动态列表

1 个答案: