ReactJS Вызов другого компонента в условном выражении if-else - PullRequest
Новая
       5

ReactJS Вызов другого компонента в условном выражении if-else

0 голосов
/ 20 октября 2018

Я новичок в ReactJS и пытаюсь создать простое веб-приложение для запуска.Я создал два компонента: 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>
        );
      }
}

1 Ответ

0 голосов
/ 20 октября 2018

Каковы выходные данные console.log (data) в вашем handleOption?

Возможно, ваш handleOption устанавливает значение в вашем состоянии в значение, отличное от «ads».Это вызовет повторную визуализацию

...