在组件外访问 props 函数答案

【问题标题】：Accessing props function outside of the component在组件外访问 props 函数
【发布时间】：2022-02-11 05:00:33
【问题描述】：

这里是 React 初学者，我正在使用 react-zoom-pan-pinch 为我的项目实现放大/缩小功能，我的缩放按钮在“TransformWrapper”之外，我所看到的所有示例都在“TransformWrapper”中'，所以我的问题是如何在'TransformWrapper'之外访问'zoomIn'、'zoomOut'、'resetTransform'。

最后我用 useRef 尝试过没有成功，有没有办法？

代码： https://codesandbox.io/s/react-zoom-pan-pinch-forked-j6yst?file=/src/index.js

代码：

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import styled from "styled-components";

const Container = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
`;
const Box = styled.div`
  width: 50px;
  height: 50px;
  background-color: ${(props) => (props.backColor ? props.backColor : "blue")};
  margin: 5px;
`;
const Toolbox = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: calc(100vw - 60px);
  margin-bottom: 10px;
  button {
    margin-left: 10px;
    width: 2em;
  }
`;
function App() {
  const transformRef = useRef();

  const onClick = () => {
    alert("onClick : open popup");
  };
  const onContextMenu = (e) => {
    e.preventDefault();
    alert("onContextMenu : show info");
  };

  const renderBoxes = () => {
    let i;
    let arr = [];
    for (i = 0; i < 30; i++) {
      arr.push(
        <Box key={"b" + i} onClick={onClick} onContextMenu={onContextMenu} />
      );
      arr.push(
        <Box
          key={"r" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="red"
        />
      );
      arr.push(
        <Box
          key={"y" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="yellow"
        />
      );
      arr.push(
        <Box
          key={"g" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="gray"
        />
      );
    }
    return arr;
  };
  return (
    <div>
      <TransformWrapper
        defaultScale={1}
        defaultPositionX={200}
        defaultPositionY={100}
        ref={transformRef}
      >
        {({
          zoomIn,
          zoomOut,
          resetTransform,
          positionX,
          positionY,
          ...rest
        }) => (
          <React.Fragment>
            <Toolbox>
              <button onClick={zoomIn}>+</button>
              <button onClick={zoomOut}>-</button>
              <button onClick={resetTransform}>x</button>
            </Toolbox>
            <TransformComponent>
              <Container>{renderBoxes()}</Container>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
      <Toolbox>
        <button onClick={() => transformRef?.current?.zoomIn()}>+</button>
      </Toolbox>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我已经尝试过使用 useRef，正如您在代码中看到的那样哪个不起作用

我想要这个

<Toolbox>
            <button onClick={zoomIn}>+</button>
            <button onClick={zoomOut}>-</button>
            <button onClick={resetTransform}>x</button>
          </Toolbox>

在“TransformWrapper”之外工作有什么想法吗？

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。 Stackoverflow 确实支持inline live demos
请停止删除该评论并重新发布。它会ping我的通知，这很烦人。否决票是匿名的。

标签： javascript html css reactjs typescript

【解决方案1】：

我解决了它，主要问题是codesandbox使用非常旧的react-zoom-pan-pinch 1.1.2，将其升级到2.1.3并在TransformWrapper上使用React ref来访问处理程序。

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import styled from "styled-components";

const Container = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
`;
const Box = styled.div`
  width: 50px;
  height: 50px;
  background-color: ${(props) => (props.backColor ? props.backColor : "blue")};
  margin: 5px;
`;
const Toolbox = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: calc(100vw - 60px);
  margin-bottom: 10px;
  button {
    margin-left: 10px;
    width: 2em;
  };
`
function App() {
  const transformComponentRef = useRef();
  const onClick = () => {
    alert("onClick : open popup");
  };
  const onContextMenu = (e) => {
    e.preventDefault();
    alert("onContextMenu : show info");
  };

  const renderBoxes = () => {
    let i;
    let arr = [];
    for (i = 0; i < 30; i++) {
      arr.push(
        <Box key={"b" + i} onClick={onClick} onContextMenu={onContextMenu} />
      );
      arr.push(
        <Box
          key={"r" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="red"
        />
      );
      arr.push(
        <Box
          key={"y" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="yellow"
        />
      );
      arr.push(
        <Box
          key={"g" + i}
          onClick={onClick}
          onContextMenu={onContextMenu}
          backColor="gray"
        />
      );
    }
    return arr;
  };

  return (
    <div>
<button onClick={()=>transformComponentRef?.current?.zoomIn()}>+</button>
       
      <TransformWrapper
         ref={transformComponentRef}
        defaultScale={1}
        defaultPositionX={200}
        defaultPositionY={100}
       
      >
        {({
          zoomIn,
          zoomOut,
          resetTransform,
          positionX,
          positionY,
          ...rest
        }) => (
         
        
            <TransformComponent>
              <Container>{renderBoxes()}</Container>
            </TransformComponent>
       
        )}
      </TransformWrapper>
    
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：