时间戳

首页 > 解决方案 > 如何在 React 组件中使用 pickr 颜色选择器 vanilla JS 库？

javascript - 如何在 React 组件中使用 pickr 颜色选择器 vanilla JS 库？

问题描述

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

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

这是源代码：

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”

标签： javascripthtmlcssreactjs

解决方案

问题是在以下行

el: '.color-picker',

您正在尝试使用 className="color-picker" 获取对 div 元素的引用。但是这个元素还不存在，因为组件还没有渲染。在您尝试获取对您的 div 的引用之后，将调用渲染函数。因此，为了解决这个问题，您可以使用 reacts lifecylce 方法之一，例如 componentDidMount

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

为了使它工作，尽管您需要确保您正在创建一个反应组件而不是一个简单的 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>
     )
   }

}

推荐阅读