反应-访问render（）方法中componentDidMount（）方法中声明的变量

时间：2019-09-12 12:30:23

标签： javascript reactjs color-picker vanilla-typescript

我在一个名为picker的react项目中使用一个颜色选择器库，这是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
                }
            }
        });

    }


    render(){

        return(

            <Fragment>
                <div  className="color-picker"></div>
                <Card width="10" height="10" color={pickr.getSelectedColor()}></Card>

            </Fragment>
        )
    } 
}

错误：

  

第60行：“ pickr”未定义为no-undef

6 个答案:

答案 0 :(得分：1)

将pickr变量放入组件的state：

// 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 { 
    constructor(props) {
        super(props);
        this.state = {
                pickr: null
        };
    }  

    componentDidMount() {
        this.setState({ 
            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
                    }
                }
            });
        });
    }

    render() {
        return(
            <Fragment>
                <div  className="color-picker"></div>
                <Card width="10" height="10" color={this.state.pickr.getSelectedColor()}></Card>
            </Fragment>
        )
    } 
}

答案 1 :(得分：0)

您可以在文件中将其声明为常量。将其放在状态对象的性能方面不好。状态对象应仅具有动态变量。 检查此代码

  // 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';

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
            }
        }
    });


export default class ColorPicker extends Component { 
   componentDidMount(){

   }


render(){

    return(

        <Fragment>
            <div  className="color-picker"></div>
            <Card width="10" height="10" color={pickr.getSelectedColor()}> . 
   </Card>

        </Fragment>
      )
   } 
}

答案 2 :(得分：0)

问题在于定义变量的范围。由于它是在componentDidMount方法内部定义的，因此该变量在其外部不再存在。为了使其存在于componentDidMount之外，需要在外部范围中定义它，或者将其附加到在componentDidMount和render中都可以访问的变量。前者意味着将声明移出类之外，移至文件的顶层。第二种选择是通过将其附加到this或使用setState作为React状态将其添加为类的属性。在最后两个中，如果颜色选择器保持不变（则表示该组件需要再次渲染），则首选第一个。

使用this：

export default class ColorPicker extends Component {

   componentDidMount(){
      this.setState({pickr: Pickr.create(/*...*/)});
   }
   render() {
      return(
            <Fragment>
                <div  className="color-picker"></div>
                <Card width="10" height="10" color={pickr.getSelectedColor()}></Card>
            </Fragment>
        )
   }
}

使用setState：

export default class ColorPicker extends Component {
   constructor(props){
      super(props);
      this.state.pickr = null;
   }
   componentDidMount(){
      this.setState = Pickr.create(/*...*/);
   }
   render() {
      return(
            <Fragment>
                <div  className="color-picker"></div>
                <Card width="10" height="10" color={pickr.getSelectedColor()}></Card>
            </Fragment>
        )
   }
}

答案 3 :(得分：0)

您还可以将其设置为对象属性

componenDidMount() {
this.picker = 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
            }
        }
    });
}

答案 4 :(得分：0)

选项： 1.将变量置于状态并通过this.state.pickr访问 2.您可以在中声明一个变量 render() { var pickr = ... return ( <div> ... </div>) }

答案 5 :(得分：0)

创建颜色状态并在componentDidMount（）中设置颜色状态... 

   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 { 
  constructor(props) {
    super(props);
    this.state = {
            color: '',  //or set any other default color
    };
  }  

 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
            }
        }
    });
     const color=pickr.getSelectedColor()
     this.setState({color})
   }

   render() {
       return(
        <Fragment>
            <div  className="color-picker"></div>
            <Card width="10" height="10" 
             color={this.state.color}></Card>
         </Fragment>
        )
      } 
    }
相关问题
最新问题