Question

我正在尝试将基本模式（documented here）合并到现有的React组件中。如果没有模态，则按钮呈现良好。

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

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

当我按语义UI反应文档中所示添加模态组件时，它可以正常编译（打字稿），但在运行时会引发错误。

代码：

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.

此组件在另一个组件中呈现。我正在使用打字稿版本2.5，semantic-ui-react 0.82.0，semantic-ui-css 2.3.3。

Answer 1

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

语义用户界面反应基本模态抛出不变式违反：Portal.render（）

1 个答案: