ReactJS 在 if-else 条件语句中调用其他组件

Question

我是 ReactJS 的新手，我正在尝试构建一个简单的 Web 应用程序作为开始。我创建了两个组件：1.Menu.jsx 2.ImgUrl.jsx。我希望用户单击菜单组件中的菜单按钮，然后触发 ImgUrl 组件。但是，在我进行测试时，ImgUrl 组件会立即出现并消失。谁能给我一些建议，最佳做法是什么？太感谢了。以下是代码：

import React from 'react';
import ImgUrl from './ImgUrl';
import { Button, Grid, Row, Col } from "react-bootstrap";

var $=require('jquery');

export default class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ' '};

        this.handleChange = this.handleChange.bind(this);
        this.handleOption = this.handleOption.bind(this);
      }

      handleChange(val) {
        this.setState({value: val});
        //console.log(val);
        this.handleOption(val);
      }

      handleOption(val){
        if(val=='ads'){
          //console.log(val);
          $.get(window.location.href + 'Xxx', (data) => {  
            //console.log(data);     
            this.setState({value: data}); 
          });

        }

      }

      render() {
        const token = this.state.value;
        console.log(token);
        let test;
        if (token == 'ads'){
          test = <ImgUrl/>;
        }
        return (
            <Col>
              <ul>
                <li onClick={this.handleChange.bind(this,"ads")} >Import Ads Weekly Report</li>
                <li onClick={this.handleChange.bind(this,"bs")} >Import BS Weekly Report</li>
                <li onClick={this.handleChange.bind(this,'adskpi')}>Import Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'importkpi')}>Build Ads Market Report</li>
                <li onClick={this.handleChange.bind(this,'adsMarket')}>Build Non Ads KPI Report</li>
                <li onClick={this.handleChange.bind(this,'nonAdsMarket')}>Build Non Ads Market Report</li>
              </ul>
              <h2 class="selectOption">You just select: {this.state.value}</h2>
              <div class="select-folder"> 

                    {test}
              </div>
            </Col>
        );
      }
}

Answer 1

您的 handleOption 中 console.log(data) 的输出是什么？

可能是您的 handleOption 将您所在州的值设置为与 'ads' 不同的值。它会导致

的重新呈现，并且如果值 == 'ads'，您只显示，因此它会消失。

ReactJS 在 if-else 条件语句中调用其他组件

ReactJS Calling Other Compoent in if-else conditional statement

javascript

reactjs

webpack-4