Javascript 语义UI反应模式：Portal.render（）：必须返回有效的反应元素（或null）

我试图在我的react仪表板应用程序中实现，我创建了一个ModalManager组件，该组件将与Redux一起用于管理Modal_Open和Modal_Close的状态

Redux部分工作得很好，但是，在渲染期间，我只看到“语义UI反应模式组件”的问题。下面是错误消息

invariant.js?7313:42 Uncaught Error: Portal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js?7313:42)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js?063f:830)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:361)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
    at Object.mountComponent (ReactReconciler.js?c56c:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
    at Object.mountComponent (ReactReconciler.js?c56c:45)
    at Object.updateChildren (ReactChildReconciler.js?c86a:121)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js?e1f8:206)

下面是模态管理器的代码，它可以在

return{renderedComponent}；

我怀疑问题在于，当呈现的组件是语义用户界面时，其他组件工作正常

我使用的是React 16.4.1

模态管理器组件

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“语义ui反应”导入{Modal}；
从“./../Redux/actions/modalaactions”导入{closeModal}”；
导出类ModalManager扩展组件{
render（）{
const{modalConfiguration}=this.props；
const defaultProps={
是的，
closeIcon：是的，
onClose:this.props.closeModal
};
让渲染组件；
if（模块配置）{
const{modalProps={}}=modalConfiguration；
渲染组件=；
}
返回{renderedComponent}；
}
}
函数MapStateTops（状态）{
返回{modalConfiguration:state.modals}；
}
导出默认连接（MapStateTops，{closeModal}）（ModalManager）；

主页

类主页扩展React.Component{
状态={
扩展：错，
孤岛加载：false，
错误：null
}
componentDidMount（）{
this.setState（{isLoading:true}）；
axios.get（API）
.然后（结果=>this.setState({
T_bug:result.data.map（x=>Number（x.code_bug））.reduce（（a，b）=>a+b，0），
孤岛加载：false
}))
.catch（错误=>this.setState({
错误，
孤岛加载：false
}))
}
render（）{
if（this.state.expanded）{
此.setState（（）=>{
返回{
扩展：false
};
});
}
返回(
欢迎来到斯坦普洛特


)
}
}
常量mapStateToProps=（状态）=>{
返回{
expandedState:state.sidebarReducer.expanded
};
}
导出默认连接（mapStateToProps）（主页）；

您没有在

模式中渲染任何子对象，也没有按照

类应用程序扩展了React.Component{
状态={openModal:false}
toggleModal=（）=>this.setState（state=>（{openModal:！state.openModal}））；
render（）{
const{openModal}=this.state；
返回(
切换模式
我很满足
);
}
}

当我将Semantic UI React从0.7x升级到0.82时，我也遇到了同样的问题。我的问题是，升级后，我仍然在项目中使用React版本15.x。当我更新到React 16.x时，模式问题消失了。因此，请检查您的
包.json
以了解您使用的React版本。如果是15.x或更低版本r、 尝试更新它。如果您使用的是Thread，那么
Thread install react
应该可以做到这一点。请注意，这可能会在您的项目中打开您可能需要解决的其他兼容性问题。
您在模式中呈现了什么？您的模式实现与文档推荐的完全不同。
trig在哪里ger
或
儿童
？仍然是相同的问题：（renderedComponent=我是一个内容我添加了一个运行示例，以便您可以自己测试，看看与您的代码有什么不同
import React, { Component } from "react";
import { connect } from "react-redux";
import { Modal } from "semantic-ui-react";
import { closeModal } from "../../Redux/actions/modalActions";

export class ModalManager extends Component {
  render() {
    const { modalConfiguration } = this.props;

    const defaultProps = {
      defaultOpen: true,
      closeIcon: true,
      onClose: this.props.closeModal
    };

    let renderedComponent;

    if (modalConfiguration) {
      const { modalProps = {} } = modalConfiguration;
      renderedComponent = <Modal {...Object.assign({}, modalProps, defaultProps)} />;
    }

    return <span>{renderedComponent}</span>;
  }
}

function mapStateToProps(state) {
  return { modalConfiguration: state.modals };
}

export default connect(mapStateToProps, { closeModal })(ModalManager);

class HomePage extends React.Component {

  state = {
    expanded : false,
    isLoading: false,
    error: null
  }

  componentDidMount() {
    this.setState({isLoading: true});

    axios.get(API)
    .then(result => this.setState({
      T_Bugs: result.data.map(x => Number(x.code_bugs)).reduce((a, b) => a + b, 0),     
      isLoading: false
    }))
    .catch(error => this.setState({
      error,
      isLoading: false
    }))

  }




  render() {



   if (this.state.expanded) {
     this.setState( () => {
        return {
          expanded : false
        };
     });
   }



    return (
        <div>
          <Main expanded={this.props.expandedState}>
          <h1>Welcome to Stemplot</h1>

           <Card.Group stackable={true} itemsPerRow={8}>
           <StatCard loading={this.state.isLoading} image={this.state.isLoading ? "/images/spinner.gif":"/images/Duplicate.svg"} description=" XXX" title="Duplicate Lines" value={nFormat(this.state.T_Duplicate_Lines)}/>
            </Card.Group>
           <br/>
 <ModalManager />

          </Main>



        </div>
    )
  }

}


const mapStateToProps = (state) => {
    return {
        expandedState: state.sidebarReducer.expanded
    };
}

export default connect(mapStateToProps) (HomePage);

class App extends React.Component {
  state = { openModal: false }

  toggleModal = () => this.setState(state => ({ openModal: !state.openModal }));

  render() {
    const { openModal } = this.state;
    return (
      <div>
        <button onClick={this.toggleModal}>Toggle Modal</button>
        <Modal open={openModal} closeIcon onClose={this.toggleModal}>
          <Header icon='browser' content="I' m a header" />
          <Modal.Content>
            <h3>I'm a content</h3>
          </Modal.Content>
        </Modal>
      </div>
    );
  }
}