javascript - React.Children.only expected 在使用 Ref 时收到单个 React 元素子错误

Question

我必须在组件 A 中调用组件 B 的一些方法。这是组件 B:(如果您需要更多代码，请联系我，我会更新我的帖子)

import A  from "./A";
export default class B extends Component {
  componentDidUpdate (prevProps, prevState) {
    this.props.onRef(this);
  }

  renderContent ( ) {
    let toolbarActiveItem = Toolbar.getActiveItem();
    if (Toolbar.getActiveItem()=="XXXX") {
      this.refs.A._showModalHistory();
    } else {
      toolbarActiveItem = Toolbar.getActiveItem();
    }

    return (
      <Container>
        {(toolbarActiveItem == 'YYY') && <C navigation={this.props.navigation} cb={this.childCallback} info={this.props.navigation.state.params}/> }
      </Container>
    );
  }

  render () {
    return (
      <StyleProvider style={getTheme(Config.theme)}>
        <A ref={component => { this.A = component; }} />
        <Container ref={this.ref}>
          { this.renderNavbar(this.title) }
          { this.renderToolbar() }
          { this.renderContent() }
          { this.renderDialog() }
        </Container>
      </StyleProvider>
    );
  } 

这是组件A:

export default class A extends Component {
  constructor(props) {
    super();
    this.subscription = 0;
    this.state = {};
    changePage = props.cb;

    this.state = {
      isModalVisibleHistory: false,
    };
  }

  _showModalHistory = () => this.setState({ isModalVisibleHistory: true });

  render() {
    return (
      <Modal isVisible={this.state.isModalVisibleHistory}>
        <View style={styles.BG}>
        <ParkHistory></ParkHistory>
        </View>
      </Modal>
    );
  }
}

我的问题是，我需要执行 this.refs.A._showModalHistory();在组件 B 中，但是，我看到以下错误:

React.Children.only expected to receive a single React element child.

我想，我在处理渲染多个组件并引用它们时遇到了问题。我应该提一下，当我删除 <A ref={component => { this.A = component; }} /> 时我的代码工作正常，但没有调用该方法。你能帮我解决这个问题吗？

Answer 1

问题在于您访问 ref 的方式。您已将 ref 分配给 Component A。您正在使用回调样式来分配 ref，因此您无需编写 this.ref.A。将其更改为 this.A._showModalHistory();

此外，您将 ref 设置为 Container 组件的方式不正确，您需要在那里使用回调

<Container ref={(ref)=> this.ref = ref}>

另一件事是 StyleProvider 组件需要一个子元素。您应该将 Container 和 A 组件包装在 View

中

render () {
    return (
      <StyleProvider style={getTheme(Config.theme)}>
        <View>
        <A ref={component => { this.A = component; }} />
        <Container ref={(ref)=> this.ref = ref}>
          { this.renderNavbar(this.title) }
          { this.renderToolbar() }
          { this.renderContent() }
          { this.renderDialog() }
        </Container>
        </View>
      </StyleProvider>
    );
  }