Question

-我正在使用功能组件。 -现在我在这里使用3个组件，其中一个是父组件，另外2个是子组件。 -我需要访问一个子组件方法或声明另一个子方法的状态。我已经使用 CreateRef 处理了类组件，但是现在我需要使用函数组件，但是在'ref.current'中却得到了Null。

export function SideBySideList(props) {
    const ref = React.createRef();

	//this is call inside ListPage after sucess
    function updateRightList(id) {
        ref.current.state.actualSearchedModel.Id = id
        ref.current.fetchDataAndUpdate();
    }
    function itemClicked(id) {
        updateRightList(id);
    }
    return (
        <>
            <div className="col-12 no-padding">
                <div className={props.leftListLayoutClass}>
                    <ListPage
					    updateRightList={updateRightList}
					/>
                </div>
                <div className={props.rightListLayoutClass}>
                    <ListPage
                        ref={ref}
                    />
                </div>
            </div>
        <>
    );
}

Answer 1

根据官方文档：

您不得在功能组件上使用ref属性，因为它们没有实例

因此，如果您的ListPage是功能组件，则必须将其转换为类组件。否则您的引用必须引用ListPage内的DOM元素。

function ListPage ({ref}) {
  return <div ref={ref}>Hello!</div>
}

已更新：

function ParentComponent () {
  const [state, setState] = React.useState(null);
  
  const onChildMount = React.useCallback((dataFromChild) => {
    setState(dataFromChild);
  });
  
  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <ChildComponent onMount={onChildMount} />
    </div>
  )
}

function ChildComponent (props) {
  const thisShouldBePassedToTheParent = "from child with love";
  
  React.useEffect(() => {
    props.onMount(thisShouldBePassedToTheParent);
  }, []);
  
  return (
    <div>child component</div>
  )
}

ReactDOM.render(<ParentComponent />, document.querySelector("#root"));

<script src="https://unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

借助功能组件，您可以使用如下引用：

// Import our hooks
import React, { useRef, useEffect } from 'react';

// create our ref
const myInput = useRef();

// This is equivalent to our componentDidMount, this will focus
useEffect(() => myInput.current && myInput.current.focus());

// Parse our ref to our textField
<Textfield inputRef={myInput} />

在这里您可以阅读文档https://reactjs.org/docs/hooks-reference.html#useref

您也可以直接使用以下引用：

<TextField inputRef={input => input && input.focus()} />

您可以在此处阅读全文：https://medium.com/javascript-in-plain-english/react-refs-both-class-and-functional-components-76b7bce487b8

Answer 3

如果某人正在寻找其中Parent是类组件而Child是功能组件的解决方案，并且想要从child（状态，函数）中获取数据

类组件：

  class Parent extends React.Component {
     constructor(){
      this.setReferenceToElement = element => {
       this.fromChild = element;
      }
     }
     handleClick(){
       console.log(this.fromChild());
     }
    
     render(){
      return (
       <div>
         <Child setRef={this.setReferenceToElement} />
         <button onClick={handleClick}> Get state from child </button>
       </div>
      )
     }
    }

功能组件：

function Child(props){
 // ... it has some state 
 props.setRef(state => state);
 return <div> Test </div>
}

我可以通过带有功能组件的ref吗？

3 个答案: