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

原则是将您的共同状态（即某事触发了某种行为）提升给父母，以便需要了解该状态的孩子可以访问它。

在React组件之间共享易失变量

1 个答案: