Question

我有一个渲染子组件的父组件。 My Child组件通过“ children”属性呈现了另外两个组件。

因此，它看起来像：

class ParentComponent extends Component {
  input = React.createRef();
  render() {
   return (
     <Form setRef={this.input}>
       <Label />
       <Input />
     </Form>
   )
  }
}

class Form extends Component {
  render() {
   const { setRef } = this.props;
   const children = React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
    setRef,
 });
});
   return (
      <>
       <form>
         {children}
       </form>
      </>
    )
  }
}

class Input extends Component {
  render() {
   const { setRef } = this.props;
   return <input ref={setRef} />
  }
}

class Label extends Component {
  render() {
   return <label>Title</label>
  }
}

正如我在一篇文章中所读到的，我应该使用“ React.cloneElement顶级API”来使道具从父组件传递到子组件，而无需在子组件中显式设置属性。

主要目标是将输入集中在click事件上，并控制我的ParentComponent中的输入节点。

问题是：如何获得对父组件中输入节点的访问权限？目前，我尝试像上面的代码那样执行此操作，但是如果我在ParentComponent中控制台this.input.current，它将为null。

从父级组件的子级组件

0 个答案: