Reactjs 如何在React中使用类似Fabric.js的东西？

Fabric.js是一个框架，它允许画布用于各种事情，如徒手绘制、SVG编辑、添加文本

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

通常，我希望创建一个组件，为画布提供初始化结构，如下所示：

componentDidMount() {

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

在将id为=“main Canvas”的画布装入应用程序后，某些局部变量会被分配一个fabric.Canvas对象

render() {

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

_canvas.isDrawingMode将结构组件中存在的当前结构画布对象设置为绘图

现在我想知道我是如何以最好的方式组织这一切的

我可以去掉Fabric组件并在根组件App.js中初始化它。工具栏组件可以将状态一直传递到App.js并在那里切换设置。我宁愿不这样做，因为它使整个应用程序不那么模块化

使用诸如Redux、MobX或React.Context之类的存储来提供全局状态，以便每个工具栏元素都可以直接访问Canvas

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

概括一下我的问题，因为这个问题不限于Fabric.Js之类的东西，而是我想使用一个为React应用程序提供外部功能的库的任何情况下，这里使用的最佳实践是什么

---

有一些react模块为我的应用程序提供了结构，但我发现的都是类似问题中建议的“react fabricjs”，已经有好几年了，不再维护，所以我根本不想使用它们。

这可能会对您有所帮助@blueseal该示例使用的是keyMirror，它在5年前最后一次提交到NPMJ上，并且在版本0.1.1中卡住了。它使用的是3年前被废弃的核武器。它也不是使用ES6语法，而是从React 16中删除的createClass。我不希望使用不再维护的旧模块。

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

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