reactjs 给予功能组件以使用内部函数[重复]

nlejzf6q 于 2023-01-17 发布在 React

关注(0)|答案(1)|浏览(107)

- 此问题在此处已有答案**：

Trigger child function from parent component using react hooks（2个答案）
3天前关闭。
我有一个组件，例如：
ParenComp.js

const ParentComp = (props) => {
  const [isTrue, setIsTrue] = useState(false);
  const setToTrue = () => {
    setIsTrue(true);
  };
  const setToFalse = () => {
    setIsTrue(false);
  };
  return isTrue ? (
  
      <Text >
        This is True
      </Text>
    
  ) : (
       <Text >
        This is False
      </Text>
  );
};
export default ParentComp;

- 主要问题**

如何在任何其他文件（例如Login.js）的其他功能组件中使用setToTrue和setToFalse函数？
"我所尝试的"
我想使用另一个文件中的内部函数，我知道我不能这样导出函数：
导出常量setToTrue =（）=〉{setIsTrue（真）;};
^此为无效
但我尝试做的是（在ParentComp.js中）使用createRef创建一个引用，导出它，然后创建并导出两个函数，这两个函数调用内部函数，如下所示：

export const trueRef = React.createRef();
export function setToTrue() {
  let ref = trueRef.current;
  if (ref) {
    ref.setToTrue();
  }
}

export function setToFalse() {
  let ref = trueRef.current;
  if (ref) {
    ref.setToFalse();
  }
}

现在，当我想在我的（Login.js）中使用它时，我会这样做：

const Login = ({ navigation }) => {
return (
<View>
<ParentComp ref={trueRef}/>
</View>
)
}

但问题是，ref没有在这里传递给ParentComp
<ParentComp ref={trueRef}/>
那么，在不使用CLass Components的情况下，如何将ref传递给函数组件以利用其中的函数呢？

reactjs

来源：https://stackoverflow.com/questions/75106025/give-ref-to-functional-component-to-use-inner-functions

1条答案

按热度按时间

djp7away1#

使用带有ref转发的useImperativeHandle钩子来授予外部组件对方法的访问权限。
正如@technophyle和@Drew Reese在评论中所指出的，useImperativeHandle是一个转义窗口，通常用于需要直接访问DOM节点的特定情况，例如聚焦输入或滚动到某个元素。
示例：

const { forwardRef, useState, useImperativeHandle, useRef } = React;

const ParentComp = forwardRef((props, ref) => {
  const [isTrue, setIsTrue] = useState(false);
  const setToTrue = () => { setIsTrue(true); };
  const setToFalse = () => { setIsTrue(false); };
  
  useImperativeHandle(ref, () => ({
    setToTrue,
    setToFalse
  }));
  
  return (
    <div>This is {isTrue ? 'True' : 'False'}</div>
  );
});

const Login = () => {
  const trueRef = useRef();
  
  return (
    <div>
      <ParentComp ref={trueRef}/>
      <button onClick={() => trueRef.current.setToTrue()}>True</button>
      <button onClick={() => trueRef.current.setToFalse()}>False</button>
    </div>
  );
};
  
ReactDOM
  .createRoot(root)
  .render(<Login />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

重用逻辑的一个更好的方法是创建一个封装行为的自定义钩子，并在Login中使用它：
一个二个一个一个

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 给予功能组件以使用内部函数[重复]

1条答案

相关问题

热门标签

最新问答