Question

我构建了一个在第三方网站上作为小部件实现的react-app。该小部件使用REST API并根据应用程序的状态在 react-modal 中呈现不同的内容。为了构建应用程序，我使用webpack。现在出现以下问题：

**在一个特定网站上，模式仍会在点击时打开，但不会呈现任何内容（尽管有很多子组件具有正确的值）。 **

此问题仅出现在一个特定网站上。该网站是一个magento页面，其他很多东西正在进行中
如果我复制相关网站的HTML标记并将其放在我自己的服务器上，我的反应应用程序将按预期工作。这就是为什么我排除了js库之间的任何冲突，因为它们也会出现在这里。
在任何其他网站上我的反应应用按预期工作
Chrome开发工具中没有控制台错误或警告
所有测试都已使用已清除的存储运行，以确保因缓存文件而无法正常工作/无法正常工作

以下是我希望相关的一些代码，但我不确定问题实际上在于这一部分。在render()内，根据状态定义了不同的组件：

let component;
switch (this.state.currentView) {
    case 'questionnaire':
        component = <QuestionnaireView
            {...commonComponentProps}

            intro={this.state.intro}
            questions={this.state.questions}
            advance={this.advanceView}
            updateQuestions={this.updateQuestions}
        />;
        break;
    case 'closure':
        component = <ClosureView
            {...commonComponentProps}

            closure={this.state.closure}
            submit={this.submitAnswers}
            goBack={this.goBackView}
        />;
        break;
    case 'results':
        component = <ResultsView
            {...commonComponentProps}
            results={this.state.results}
            reset={this.resetApp}
            userToken={this.state.userToken}
        />;
        break;
    default:
        return false;
}

然后在模态中呈现值

<Modal
    className="questionnaire-component"
    isOpen={this.state.modalIsOpen}
    onRequestClose={() => this.setState({modalIsOpen: false})}
    style={ModalStyles}
    contentLabel="Questionnaire"
    onClick={this.closeModal}
>
    {this.state.loading ?
        <div style={{display: 'flex',justifyContent: 'center',margin: '50px'}}>
            <Loading type='balls' color='#3C3C3B'/>
        </div>
        :
        component
    }
</Modal>

通过检查值，我可以说component实际上包含正确的值。此外，如果我进行测试并渲染<Modal><p>Hello World!</p></Modal>，这也不会像开头所说的那样呈现，但这仅适用于一个特定的主机站点，它通常适用于所有地方。

React组件不在特定站点上呈现

0 个答案: