Semantic UI React Modal：Portal.render()：必须返回有效的 React 元素（或 null）

Question

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

Redux 部分效果很好，但是，在渲染过程中，我只看到“Semantic-UI-React-Modal 组件的问题。下面是错误消息

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 <span>{renderedComponent}</span>;上渲染其他组件（一些测试图表） 我怀疑问题是当渲染的组件是 Semantic-Ui-React-Modal 时，其他组件工作得很好。

我正在使用 React 16.4.1

模态管理器组件

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);

Answer 1

您没有在Modal 内渲染任何子项，也没有按照docs 传递所需的道具

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>
    );
  }
}

Running example

Answer 2

当我将 Semantic UI React 从 0.7x 升级到 0.82 时，我遇到了同样的问题。我的问题最终是在升级之后，我仍然在我的项目中使用 React 版本 15.x。当我更新到 React 16.x 时，模态问题就消失了。因此，请检查您的 package.json 以了解您正在使用的反应版本。如果它是 15.x 或更低版本，请尝试更新它。如果您使用的是纱线，那么yarn install react 应该可以解决问题。请注意，这可能会在您的项目中引发您可能需要解决的其他兼容性问题。