Question

在边栏中，我有一个单选按钮列表，每个按钮应选择位于应用程序主区域的组件。我想对其进行设置，以便在单击选中它的单选按钮时该组件可以滚动到视图中，据我所知，我需要引用该组件才能将其滚动到视图中，但是我遇到了麻烦这样做是因为我不知道如何正确地将引用从子组件传递到父组件。

父组件是一个类组件，在其构造函数中，我像这样设置createRef()：

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

然后我创建了一个函数，该函数应该传递给子组件并返回引用：

getElem(ref) {
  this.myRef = ref;
}

现在，在父组件的渲染内部，我将函数传递给子组件，如下所示：

<Designer 
  usedComponents={this.state.usedComponents}
  myRef={this.getElem}
/>

在Designer组件内部，我映射了主要区域组件，并将ref像这样传递给它们：

const components = props.usedComponents.map((component, index) => {
  return (
    <div onMouseUp={() => props.selectComponent(index)} key={index}>
      <DesignerComponent {...component} myRef={props.myRef} />
    </div>
  );
});
return components;

DesignerComponent组件是通过switch语句确定的，因为每个组件都有不同的道具集，但是在switch语句内部，我还将myRef={props.myRef}传递给每个单独的组件，然后在每个单独的组件内设置ref像这样：

<section ref={props.myRef}></section>

但是，这会破坏我的应用程序并显示以下错误消息：

“ TypeError：无法设置未定义的属性'myRef'”。

我在做什么错了？

Answer 1

我知道了。函数getElem（ref）似乎没有任何作用。我只是将myRef = {this.myRef}传递给Designer组件，现在它可以工作了。

如何将React.createRef（）传递给子组件？

1 个答案: