React.Children.only 预计在使用 Ref 时会收到单个 React 元素子错误

Posted 2023-02-22

【中文标题】React.Children.only 预计在使用 Ref 时会收到单个 React 元素子错误

【英文标题】：React.Children.only expected to receive a single React element child error while using Ref

【发布时间】：2018-04-27 06:35:36

【问题描述】：

我必须在组件 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>
    );
  

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

React.Children.only 期望接收单个 React 元素子元素。

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

【参考方案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>
    );
   

【讨论】：

感谢您的回复，它再次向我显示相同的错误。 :(

谢谢，它显示了一个新错误。这是“未定义不是对象（评估 props.info）”。我认为它不会让 render() 在包装在 .

时访问提到的道具

您是否在任何地方使用传递给组件 C 的 info 属性。也许这就是这个问题的根源

是的，我将它传递给组件 C，但是，我无法避免在那里传递信息。您可以在代码中看到它，这里：“(toolbarActiveItem == 'YYY') && ”。你有什么想法吗？

你知道任何其他方法，以便我可以调用我的方法而不是使用 ref 吗？