Question

我有1个父组件名称[Parent-1]和1个子组件名称[Child-1]。现在，我还有更多其他组件名称[Other-1]和[Other-2]。

现在我将[Other-1]和[Other-2]组件传递给[Child-1]组件。 JSX渲染正确。如何从[Child-1]访问[Other-1/2]组件功能？或者如何从[Other-1/2]将道具传递给[Child-1]？

通过使用refs，我可以从[Parent-1]调用[Other-1/2]函数，但我想从[Child-1]访问。我尝试将引用传递给[Child-1]，如<Child abc={() => this.refs.other1.hello()}/>或<Child abc={this.refs.other1.hello()}/>，但这不起作用。

通过使用全局事件发射器方式，我能够解决上述问题。但不确定这是否是React.js中的合适方式

Answer 1

我认为您没有正确使用refs。

当您尝试提供arrow function引用时，由于引用返回null，有时会导致错误。请参阅my question以了解原因。

该示例可帮助您了解refs

希望这有帮助！

class Others1 extends React.Component {
  log(){
    console.log('Hello from Others1')
  }
  render() {
    return <h1>Others1</h1>
  }
} 

class Others2 extends React.Component {
  log(){
    console.log('Hello from Others2')
  }
  render() {
    return <h1>Others2</h1>
  }
} 


class Child extends React.Component{
  other1Ref(el) {
    el.log()
  }
  other2Ref(el) {
    el.log()
  }
  render() {
    const Others1 = this.props.others1
    const Others2 = this.props.others2
    return (
      <div>
       <Others1 ref={this.other1Ref}/>
       <Others2 ref={this.other2Ref}/>
      </div>
    )
  }
  
}

class Parent extends React.Component{
  render() {
    return <Child others1={Others1} others2={Others2}/>
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

此外，可能存在我们必须将[Others1]和[Others2]作为对象数组传递的例子。

class Others1 extends React.Component {
  log(){
    console.log('Hello from Others1');
  }
  render() {
    return <h1>Others1</h1>
  }
} 

class Child extends React.Component{
  other1Ref(el) {
    el.log();
  }

  render() {

    // 'i' need to be counter for eg. 0, 1, 2 ...
    const Others1 = this.props._array[i].type();
    Other1.other1Ref();

    return (
      <div></div>
    )
  }

}

let _array = [<Others1/>, ...];

class Parent extends React.Component{
  render() {
    return <Child _array={_array} />
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

通过使用.type（），我们将能够在对象/组件数组的情况下访问Children函数

儿童与儿童组成部分沟通

2 个答案: