在React组件之间共享volatile变量[重复]

Question

我有一组组件呈现同一页面的不同部分。只要在其中一个内部提交操作，就应该锁定其他的操作（应该通过它们传播一个volatile标志，并触发一个禁用所有元素的javascript函数）

class FirstBlock extends React.Component {
    constructor(props) {
        super(props);
        .......
        }
    }
    render() {......}
}
class SecondBlock extends React.Component {
    constructor(props) {
        super(props);
        .......
        }
    }
    render() {......}
}

页面组件：

import FirstBlock from 'Components/FirstBlock';
import SecondBlock from 'Components/SecondBlock';

class PageBlock extends React.Component {
    constructor(props) {
        super(props);
        .......
        }
    }
    render() {
        return (
            <FirstBlock ... />
            <SecondBlock ... />
        );
    }
}

有什么想法吗？我是新手，任何提示都会有帮助。

Answer 1

在（非常）一般的术语中，从父块传递一个事件处理程序到每个块中。当从其中一个触发操作时，在父级中处理该操作。如果需要根据哪个子级引发操作来改变行为，则需要为每个子级提供某种标识符，以便在调用处理程序时知道要做什么。

class PageBlock extends React.Component {
    constructor(props) {
        super(props);
        .......
        }
    }
    onAction = (id)=>{
       // set isVolatile or do whatever you need to do
    }
    render() {
        return (
            <FirstBlock id={firstBlockId} onAction={this.onAction}... />
            <SecondBlock id={secondBlockId} onAction={this.onAction}... />
        );
    }
}


class FirstBlock extends React.Component {
    constructor(props) {
        super(props);
        .......
        }
    }
    onAction = ()=>{
        this.props.onAction(this.props.id)
    }
    render() {......}
}

其原则是将您的公共状态（即某个事件触发了某个操作）提升到父级，以便需要了解该状态的子级能够访问该状态。