我在一个名为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
答案 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>
)
}
}