如何在单击时从导入的组件调用方法?

Question

假设我有以下两个类。是否有可能从其他类调用方法?

这里我想从ColorBox调用方法App.changeColor。但这似乎并不奏效。当我点击一个颜色框时，什么也不会发生，甚至不输出警告。

使用()时，编译失败:

_App__WEBPACK_IMPORTED_MODULE_2__.default.changeColor is not a function

ColorBox.js

import React from 'react'
/* _____________________ Styles _____________________ */
import './App.css'
/* __________________________________________________ */
/* ___________________ Components ___________________ */
import App from './App'
/* __________________________________________________ */
class ColorBox extends React.Component {
render() {
return (
<div className="color-box" onClick={App.changeColor} style={{backgroundColor: this.props.bg}}></div>
)
}
}
export default ColorBox

App.js

import React from 'react'
/* _____________________ Styles _____________________ */
import './App.css'
/* __________________________________________________ */
/* ___________________ Components ___________________ */
import ColorBox from './ColorBox';
/* __________________________________________________ */
class App extends React.Component {
state = {
color: ["blue", "red", "yellow", "green", "purple", "indigo", "grey", "pink"]
}
changeColor = () => {
const random = Math.floor(Math.random() * this.state.color.length);
this.props.bg = this.state.color[random];
alert("lol");
}
randomizeColor() {
const random = Math.floor(Math.random() * this.state.color.length);
return (random, this.state.color[random]);
}
render() {
return (
<div className="App">
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
<ColorBox bg={this.randomizeColor()} />
</div>
)
}
}
export default App

已更新(功能组件):

import React, {useState} from 'react'
function App(){
const [allColors, setAllColors] = useState(["blue", "red", "yellow", "green", "purple", "indigo", "grey", "pink"]);
const [boxes, setBoxes] = useState(16);
const randomizeColor = () => {
const random = Math.floor(Math.random() * allColors.length);
return allColors[random];
}
const changeColor = () => {
const random = Math.floor(Math.random() * allColors.length);
alert(allColors[random]);
}
const drawBoxes = () => {
let n = 0;
let drawBoxes = [];
while (n < boxes) {
drawBoxes.push(
<div className="color-box" onClick={changeColor} style={{backgroundColor: randomizeColor()}} />
);
n++;
}
return drawBoxes;
}
return (
<div className="App">
{drawBoxes()}
</div>
) }
export default App

Answer 1

您可以将changeColor方法作为prop传递给ColorBox组件。

<ColorBox changeColor={this.changeColor} .../>

然后你在ColorBox组件中获得了作为道具的方法:

function ColorBox({bg, changeColor}){
return (
<div className="color-box" 
onClick={changeColor} 
style={{backgroundColor: bg}}/>
)

}

一些技巧:

• 两个组件都可以是没有类的函数组件，这是今天创建组件的常用方法，特别是只有渲染方法的ColorBox组件。我改了。
• 如果你只有一个没有内容的div，在jsx中你可以用内联的方式关闭元素，你不需要创建一个关闭标签。