semantic-ui-react Basic Modal throwing 不变违规：Portal.render()

Question

我正在尝试将基本模式 (documented here) 合并到现有的 React 组件中。没有模式，按钮呈现良好。

class NewInstanceModal extends React.Component<{}, {}> {

    render() {
        console.log('modal render');
        return (<Button>Basic Modal</Button>);
    }
}

当我按照语义-ui-react 文档中所示添加模态组件时，它编译正常（打字稿），但在运行时抛出错误。

代码：

class NewInstanceModal extends React.Component<{}, {}> {

    render() {
        console.log('modal render');
        return (
            <Modal trigger={<Button>Basic Modal</Button>} basic size='small'>
                <Header icon='archive' content='Archive Old Messages' />
                <Modal.Content>
                    <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
                </Modal.Content>
                <Modal.Actions>
                    <Button basic color='red' inverted>
                        <Icon name='remove' />No
                    </Button>
                    <Button color='green' inverted>
                        <Icon name='checkmark' />Yes
                    </Button>
                </Modal.Actions>
            </Modal>
            );
    }
}

错误：

Invariant Violation: Portal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

此组件在另一个组件中呈现。我使用的是 typescript 版本 2.5，semantic-ui-react 0.82.0，semantic-ui-css 2.3.3。

Answer 1

我通过将 React 更新到最新版本 16.4.2 修复了这个错误

semantic-ui-react Basic Modal throwing 不变违规：Portal.render()

semantic-ui-react Basic Modal throwing Invariant Violation: Portal.render()

modal-dialog

typescript

reactjs

semantic-ui

semantic-ui-react