javascript - 在 React 组件之间共享 volatile 变量

Question

这个问题已经有答案了:

How can I communicate between related react components? (11 个回答)

已关闭 3 年前。

我有一组渲染同一页面不同部分的组件。每当在其中一个操作中提交操作时，其他操作就应该被锁定( volatile 标志应该通过它们传播并触发一个禁用所有元素的 JavaScript 函数)

block 组件:

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 ... />
        );
    }
}

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

Answer 1

用(非常)一般的术语来说，将事件处理程序从父级传递到每个 block 中。当其中一个操作触发时，请在父级中处理此问题。如果您需要根据哪个子级引发操作来更改您的行为，您需要为每个子级提供某种标识符，以便在调用处理程序时它知道要做什么。

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() {......}
}

原则是将您的公共(public)状态(即某件事触发了某个操作)提升给父级，以便需要了解该状态的子级可以访问它。