javascript – 语义UI反应模式：Portal.render()：必须返回有效的React元素(或null)

我试图在我的反应仪表板应用程序中实现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)

下面是模态管理器的代码,它能够在返回时显示其他组件(一些测试图表)< span> {renderedComponent}< / span&gt ;;
我怀疑问题是当渲染的组件是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);

解决方法:

您没有在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

标签：javascript,reactjs,react-redux,react-router,semantic-ui-react
来源： https://codeday.me/bug/20190823/1697312.html