javascript - React 组件在不同 DOM 节点中的交互性(并行)

Question

我有类似的情况:

<div className="container">
    <div>
        <PermissionsTable \>
    </div>
    <div>
        <input type="button" value="Save Changes" readOnly />
    </div>
</div>

我希望按钮能够控制 PermissionsTable 的操作，但是由于它们不在同一 DOM 级别，而是并行的，所以我无法轻松地根据 PermissionsTable 数据控制按钮。

例如，如果权限表不脏，我需要禁用“保存更改”按钮，并且我应该能够通过单击“保存更改”按钮来控制每个 PermissionsTable 脏状态(这意味着一旦保存，所有行都应该是不再脏了)。

如果 PermissionsTable 是“保存更改”按钮的父级，这将非常容易，但是这是不可能的，因为根据我的产品规范，这不是我构建 DOM 的方式。

我还考虑过在容器周围添加某种 PermissionsTableContext ，以便我可以在同一范围内与两个元素进行交互，但是我不确定这是否是正确的 React 方法(见下文) )。

<PermissionsTableArea>
    <div className="container">
        <div>
            <PermissionsTable \>
        </div>
        <div>
            <input type="button" value="Save Changes" readOnly />
        </div>
    </div>
</PermissionsTableArea>

我尝试通过使用引用来实现此目的，这部分有效，但我无法完全控制整个系统，因为来自子组件的各种函数引用使得它变得极其困惑。

Answer 1

也许是这样的

class PermissionTableArea extends Component {
    constructor(props) {
        super(props)
        this.state={
            data
        }
    }

    handleClickButton= () => {
        let data = this.state.data;
        this.setState({data: setNonDirty(data)}
    }

    render() {
        return(
            <div className="container">
                <div>
                    <PermissionsTable data={this.state.data} />
                </div>
                <div>
                    <input 
                        type="button" 
                        value="Save Changes" 
                        onClick={this.handleClickButton}
                        readOnly={isDirty(this.state.data)} 
                    />
                </div>
            </div>
        )
    }
}