Question

假设我有一个App.js，它将两个组件放在屏幕上。现在，在此示例中，我想在另一个组件（MyCanvas）中具有一个组件（MyButton）触发函数。如果MyCanvas包含MyButton，我可能可以将MyButton中的某些内容扔到MyCanvas中，以更改那里的状态。但是，如果两个组件处于同一级别，该怎么办？我基本上想拥有这样的结构，MyCanvas显示一些内容，而MyButton代表提供操作的组件（或组件结构）。

                     ------
                    |App.js|
                     ------
                      /  ^ 
                     v    \
             |Display  | |Tool/Buttons|
             |Component| |Component   |

据我了解，我无法从App.js调用MyCanvas中的方法。

ReactJS代码通常具有以下结构：

假设这是App.js

import React, {Component} from 'react';
import MyCanvas from './components/MyCanvas';
import MyButton from './components/MyButton';

class App extends Component {

    changecanvas = () => {
        //how can I pass something into Canvas component from here?
    }

    render(){
        return (
            <div className="App" >
                <MyCanvas />
                <MyButton />
            </div>
        );
    }
}

Canvas组件可以这样定义：

import React, {Component} from 'react';
import {canvas} from 'canvas';

class MyCanvas extends React.Component {

    componentDidMount(){
        // Make a New Canvas from a canvas package
        this.the_canvas = new canvas('main-canvas', {
            height: 100,
            width: 100
        });
    }

    //this supposed to be triggered on clicking MyButton

    changeCanvasState = () => {
        this.the_canvas.newState = true;
    }

    render(){
        return (
            <React.Fragment>
                <canvas id="main-canvas"></canvas>
            </React.Fragment>
        );
    }
}

这应该定义了一个触发动作的按钮：

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';

class MyButton extends React.Component {

    changecanvas = () => {
        //throw something up to App.js
    }

    render(){
        return (
            <React.Fragment>
                <Button onClick={this.changecanvas}>Change state</Button>
            </React.Fragment>
        );
    }
}

如何通过单击MyButton组件在MyCanvas.jsx中触发状态更改？

Answer 1

App应该具有某种状态，并传递给MyCanvas。 App还应将回调函数传递给MyButton，以更新该状态。单击MyButton时，应调用该函数。更新后的状态会自动从App传播到MyCanvas，因为它是作为道具传递的。您可以在official docs中阅读更多内容。

如何在ReactJS上的组件中触发状态更改？

1 个答案: