0

我构建了一个在 3rd 方网站上作为小部件实现的 react-app。该小部件使用 REST API 并根据应用程序的状态以反应模式呈现不同的内容。为了构建应用程序，我使用 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>它也不会像开头所说的那样渲染，但它仅适用于一个特定的主机站点，它通常在任何地方都有效。

4

0 回答 0