Question

我想在react.js项目中使用名为pickr的颜色选择器库。

如何将库添加到我的react.js组件中？

我导入了库：@simonwep/pickr
然后，我导入了经典主题：@simonwep/pickr/dist/themes/classic.min.css
创建了一个名为ColorPicker的函数，并从github存储库中粘贴了一些代码
该函数返回一个div标签，其中包含以下参数：className="color-picker"

这是源代码：

import React from 'react';
import Pickr from '@simonwep/pickr';
import '@simonwep/pickr/dist/themes/classic.min.css';


export default function ColorPicker() {
const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic', // or 'monolith', or 'nano'

    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: true,
            hsla: false,
            hsva: false,
            cmyk: false,
            input: true,
            clear: true,
            save: true
        }
    }
});
return(
<div className="color-picker"></div>
)
  }

这是我收到的错误消息：

TypeError：无法获取未定义或空引用的属性“ parentNode”

Answer 1

问题在于，在下面的行

el: '.color-picker',

您正在尝试使用className =“ color-picker”获取div元素的引用。但是此元素将不存在，因为该组件尚未渲染。在尝试获取对div的引用之后，渲染函数将被称为。因此，为了解决此问题，您可以使用reacts生命周期方法之一，例如componentDidMount

componentDidMount(){
  Pickr.create({
   el: '.color-picker',
   theme: 'classic', // or 'monolith', or 'nano'
   .... //rest of your code
}

为了使它起作用，尽管您需要确保创建的是React组件，而不是简单的javascript函数。

import React, { Component } from 'react';

export default class ColorPicker extends Component { 

   ....

   componentDidMount(){
     const pickr = Pickr.create({
     el: '.color-picker',
     theme: 'classic', // or 'monolith', or 'nano'
      ...//rest of your code
   } 

   render(){
     return(
       <div className="color-picker"></div>
     )
   }

}

Answer 2

正如另一个回答所说，您必须在第一个渲染之后调用该方法，以便在调用函数时该元素存在。

您可以为此使用类组件和componentDidMount，也可以将功能组件与诸如useEffect之类的挂钩一起使用，以控制功能组件的生命周期。

如何在React组件中使用Picker Color Picker Vanilla JS库？

2 个答案: