Question

我需要有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>

Answer 1

认为这个问题最好由docs：

回答

如果您还没有使用React编写多个应用程序，那么您的第一个应用程序倾向通常是尝试使用refs来制造东西发生＆＃34;在你的应用程序中如果是这种情况，请花一点时间思考更多批判性的关于组件中应该拥有哪个州层次结构。通常情况下，很明显，适当的地方是拥有＆＃34;那 state在层次结构中处于更高级别。把国家放在那里通常会消除任何使用refs以使事情发生的愿望。 - 相反，数据流通常会实现您的目标。

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

Answer 2

我完全赞同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'));

你需要为所有孩子储蓄的任何州，你都是在共同的父母身边。我真的希望这会有所帮助。

Answer 3

以下代码可帮助我设置两个兄弟之间的通信。设置在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>
        );
    }
}

Answer 4

special-props

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

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

反应 - 将ref传递给兄弟姐妹

4 个答案: