javascript - 语义 UI React Modal : Portal. render():必须返回有效的 React 元素(或 null)

Question

我正在尝试实现 semantic-ui-react modal在我的 React 仪表板应用程序中，我创建了一个 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

Modal Manager Component

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

Home Page

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 传递所需的 Prop 。

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