Question

我正在构建一个React应用，它具有两个没有父子关系的功能组件。

组件一呈现一个canvas元素，并具有更改该元素的功能。

第二个组件用于用户界面，并具有一些按钮，我想触发这些组件的功能。

该应用程序非常复杂，我想将所有canvas功能保留在一个不在全局应用程序范围内的位置。

我的问题是如何在第二部分中引用第一部分的功能。

组件一：

export default function CanvasElement() {

    let drawImage = () =>  {
        /* Alter canvas */
    }

    return (
        <div>
            <canvas id="image-region-canvas"></canvas> 
        </div>
    )
}

第二部分：

export default function UIElement() {

    return (
        <div>
            <button onClick={canvasElement.drawImage}></button> 
        </div>
    )
}

App.js：

 class App extends Component {
    render() {
        return (
            <div className="card-designer">
                <CanvasElement/>
                <UIElement/>
            </div>
        );
     }
  }

Answer 1

实际上，您实际上需要将drawImage()函数移至App组件，并将其作为道具传递给两者或本质上传递给UIElement。

Answer 2

您应将<App>视为容器，或将两个子组件都包装在<App>内的容器父容器中。然后，将函数放在父级中，并将它们作为道具返回的内容传递给CanvasElement。这样，您可以通过单击按钮来调用函数，并将结果传递给另一个孩子。

Answer 3

为什么不使用容器组件？

export default function Container() {

    let drawImage = () =>  {
        /* Alter canvas */
    }

    return (
        <div>
            <CanvasElement/>
            <UIElement drawImage={drawImage}/>
        </div>
    )
}

要获得更好的可重用性，您必须同时使用演示组件和容器组件。所有业务逻辑或数据操作都需要由容器组件处理。演示组件仅负责显示从道具获得的数据。

因此，通过上述实现，您可以将所有业务逻辑数据保存在一个位置（在这种情况下，位于容器组件内部），然后可以将任何必要的内容作为道具传递给子组件。

React访问另一个组件的功能

3 个答案: