React - 访问在 render() 方法中的 componentDidMount()

Question

我在名为 pickr 的反应项目中使用颜色选择器库，这里是 github 上文档的链接：https : //github.com/Simonwep/pickr。我使用了该componentDidMount()方法，并且我想访问其中声明的变量，以便从颜色选择器中获取所选颜色并将其显示在同一页面的另一个位置。

我创建了一张卡片（来自材料 ui 组件的组件），并设置它的颜色如下：

<Card width="10" height="10" color={pickr.getSelectedColor()}></Card> 

// Libraries :

import React, { Component,Fragment } from 'react';

import Pickr from '@simonwep/pickr'; // documentation about this library : https://github.com/Simonwep/pickr 

import '@simonwep/pickr/dist/themes/classic.min.css';

import Card from '@material-ui/core/Card';

export default class ColorPicker extends Component { 

   componentDidMount(){

        const pickr = Pickr.create({

            el: '.color-picker',

            theme: 'classic',

            swatches: [

                'rgba(244, 67, 54, 1)',

                'rgba(233, 30, 99, 0.95)',

                'rgba(156, 39, 176, 0.9)',

                'rgba(103, 58, 183, 0.85)',

                'rgba(63, 81, 181, 0.8)',

                'rgba(33, 150, 243, 0.75)',

                'rgba(3, 169, 244, 0.7)',

                'rgba(0, 188, 212, 0.7)',

                'rgba(0, 150, 136, 0.75)',

                'rgba(76, 175, 80, 0.8)',

                'rgba(139, 195, 74, 0.85)',

                'rgba(205, 220, 57, 0.9)',

                'rgba(255, 235, 59, 0.95)',

                'rgba(255, 193, 7, 1)'

            ],

            components: {

                // Main components

                preview: true,

                opacity: true,

                hue: true,

                // Input / output Options

                interaction: {

                    hex: false,

                    rgba: false,

                    hsla: false,

                    hsva: true,

                    cmyk: false,

                    input: true,

                    clear: true,

                    save: true

                }

            }

        });

    }

错误：

第 60 行：'pickr' 未定义 no-undef