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

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 方法作为道具传递给ColorBox Component。

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

然后你在 ColorBox 组件中将方法作为道具：

function ColorBox({bg, changeColor}){

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

一些提示：

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