Fabric.js是一个框架，该框架允许将画布用于各种事物，例如自由手绘，SVG编辑，添加文本扩展。

当我想创建一个使用Fabric来实现画布功能的应用程序时，我陷入了React原理，即向下传递道具并提升状态。

通常我想创建一个组件，为画布提供初始化面料的功能，如下所示：

componentDidmount() {

    this.theCanvas = new fabric.Canvas('main-canvas',{
        preserveObjectStacking: true
    })
}

一些局部变量被分配了一个fabric.Canvas对象，它是在应用程序中安装了id =“ main-canvas”的画布之后。

render() {

    return (
        <React.Fragment>
            <div id="canvas-container">
                <canvas style={{border: 'solid 1px #555'}} id='main-canvas' />
            </div>
        </React.Fragment>
    );

此外，我还将构造一些UI元素，例如工具栏，工具设置，导出按钮，撤消/重做等。

示例性的绘制按钮，用于切换画布的drawMode。

render() {
    return(
        <Button
            onClick={this.props.toggleDraw}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Freehand
        </Button>
    );
}

现在的问题是，需要告知Fabric将此drawMode设置为true或设置为false时被禁用：

    this.the_canvas.isDrawingMode = this.props.drawMode;

the_canvas.isDrawingMode将当前Fabric画布对象（存在于Fabric组件中）设置为图形。

现在，我想知道如何以最佳方式进行组织。

1. 我可以摆脱Fabric组件，并在Root组件（这里是App.js）中对其进行初始化。工具栏组件可以将状态一直传递到App.js并在那里切换设置。我不希望这样做，因为这会使整个应用程序模块化程度降低。

2. 使用Redux，MobX或React.Context之类的商店来提供全局状态，以便每个工具栏元素都可以直接访问Canvas。

3. 我可以从Fabric中完全删除结构.Canvas初始化完全是通过React UI并以传统方式将其直接包含到HTML根文件中，然后在UI元素中构造包装函数。

为了概括我的问题，由于这个问题不仅限于Fabric.Js，而且在任何情况下我都想使用在React应用程序中提供外部功能的库，在这里使用的最佳实践是什么？ / p>

有一些将模块提供到我的应用程序中的React模块，但是我发现的所有内容（例如在类似问题中建议的“ react-fabricjs”）都已经使用了几年并且不再维护，所以我不想使用它们完全没有。