反应 - 将引用传递给兄弟姐妹

React - passing ref to sibling

本文关键字：兄弟姐妹 引用 反应      更新时间：2023-09-26

我需要有 2 个同级组件，其中 1 个必须引用另一个组件 - 这可能吗？

我试过这个：

<button ref="btn">ok</button>
<PopupComponent triggerButton={this.refs.btn} />

甚至这个

<button ref="btn">ok</button>
<PopupComponent getTriggerButton={() => this.refs.btn} />

但是我在这两种情况下都undefined。有什么想法吗？

注意：父组件对我不起作用，因为我需要多组父组件，例如 

<button />
<PopupComponent />
<button />
<PopupComponent />
<button />
<PopupComponent />

不是这样的：

<div>
  <button />
  <PopupComponent />
</div>
<div>
  <button />
  <PopupComponent />
</div>
<div>
  <button />
  <PopupComponent />
</div>

认为这个问题最好由文档回答：

如果您还没有使用 React 编写多个应用程序，那么您的第一个 倾向通常是尝试使用引用来"制造东西" 发生"在您的应用中。如果是这种情况，请花点时间多想一想 关键是关于状态应该在组件中拥有的位置 等级制度。通常，很明显，"拥有"它的适当地方 状态位于层次结构中的较高级别。将状态放置在那里 通常消除了任何使用 refs 来"让事情发生"的愿望—— 相反，数据流通常会实现您的目标。

不确定你想做什么，但我的预感是父组件，传递道具是你在这里真正想要的。

我完全同意Mark McKelvy提供的报价。你试图实现的目标在 React 中被认为是一种反模式。

我要补充一点，创建父组件并不一定意味着它必须是直接父组件，您可以在链上进一步创建一个父组件，您可以在其中将所有子组件渲染在一起的数组，具有在所有子组件（或根据您的示例下的子组件对）之间的协调逻辑位于父组件中。

我创建了一个粗略的概念示例，它应该可以解决问题：

class A extends React.Component {
    onClick(key) {
        alert(this.refs[key].refs.main.innerText);
    }
    render() {
        var children = [];
        for (var i = 0; i < 5; i++)
            children.push.apply(children, this.renderPair(i));
        return (
            <div>
                {children}
            </div>
        );
    }
    renderPair(key) {
        return [
            <B ref={'B' + key} key={'B' + key} onClick={this.onClick.bind(this, 'C' + key)}/>,
            <C ref={'C' + key} key={'C' + key} onClick={this.onClick.bind(this, 'B' + key)}/>
        ];
    }
}
class B extends React.Component {
    render() {
        return <p ref="main" onClick={this.props.onClick}>B</p>;
    }
}
class C extends React.Component {
    render() {
        return <p ref="main" onClick={this.props.onClick}>C</p>;
    }
}

React.render(<A/>, document.getElementById('container'));

你需要为所有孩子保存的任何状态，你都在共同的父母中做。我真的希望这有所帮助。

以下代码可帮助我设置两个兄弟姐妹之间的通信。设置是在 render（） 和 componentDidMount（） 调用期间在其父级中完成的。希望对您有所帮助。

class App extends React.Component<IAppProps, IAppState> {
    private _navigationPanel: NavigationPanel;
    private _mapPanel: MapPanel;
    constructor() {
        super();
        this.state = {};
    }
    // `componentDidMount()` is called by ReactJS after `render()`
    componentDidMount() {
        // Pass _mapPanel to _navigationPanel
        // It will allow _navigationPanel to call _mapPanel directly
        this._navigationPanel.setMapPanel(this._mapPanel);
    }
    render() {
        return (
            <div id="appDiv" style={divStyle}>
                // `ref=` helps to get reference to a child during rendering
                <NavigationPanel ref={(child) => { this._navigationPanel = child; }} />
                <MapPanel ref={(child) => { this._mapPanel = child; }} />
            </div>
        );
    }
}

特殊道具

特殊道具警告JSX 元素上的大多数 props 都传递给组件，但是，有两个特殊的 prop（ref 和 key）被 React 使用，因此不会转发到组件。

例如，尝试从组件（例如渲染函数）访问this.props.key没有定义。如果需要访问子组件中的相同值，则应将其作为不同的 prop 传递（例如：）。虽然这似乎是多余的，但请务必将应用逻辑与协调提示分开。

相关文章：