Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Переписать дерево с js на jsx  [new]
DNShark
Member

Откуда:
Сообщений: 237
в общем не получается переписать запрос получения дерева с js на jsx под React

ошибка такая:

TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).treeview is not a function

скрипт:


 
import React, {Component} from 'react';
import $ from 'jquery';

$.ajax({
            type: "GET",
            url: 'http://localhost:8080/tree',
            dataType: "json",
            success: function (response) {
                $('#tree').treeview({
                    levels: 1,
                    showTags: true,
                    selectable: true,
                    highlightSelected: true,
                    data: response,
                    onNodeSelected: function (event, node) {
               //         clickDocsNode(event, node);
                    },
                    onNodeUnselected: function (event, node) {
                //        clickDocsNode(event, node);
                    }
                });
            },
            error: function () {
                console.log("error");
            }
        });


need help. Спасибо большое
9 май 18, 11:45    [21397635]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
Тshаmil
Member

Откуда:
Сообщений: 15321
DNShark
в общем не получается переписать запрос получения дерева с js на jsx под React

ошибка такая:

TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).treeview is not a function

скрипт:


 
import React, {Component} from 'react';
import $ from 'jquery';

$.ajax({
            type: "GET",
            url: 'http://localhost:8080/tree',
            dataType: "json",
            success: function (response) {
                $('#tree').treeview({
                    levels: 1,
                    showTags: true,
                    selectable: true,
                    highlightSelected: true,
                    data: response,
                    onNodeSelected: function (event, node) {
               //         clickDocsNode(event, node);
                    },
                    onNodeUnselected: function (event, node) {
                //        clickDocsNode(event, node);
                    }
                });
            },
            error: function () {
                console.log("error");
            }
        });


need help. Спасибо большое

выложи код weback.config.js и package.json
9 май 18, 13:14    [21397760]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
Тshаmil
Member

Откуда:
Сообщений: 15321
ну и раз уж речь пошла о реакте то код необходимо оформлять в виде компонента, использовать jquery вместе с реактом - не совсем кошерно, особенно для таких вещей как ajax, вместе с реактом для ajax используют, как правило, axios:

устанавливаем
npm i axios -S


используем

import React, {Component} from 'react';
import axios from 'axios';
import TreeView from '../src/react-treeview';

export default class TreeComponent extend React.Component
{

    constructor(props){
        super(props);
        
        this.state = {
          dataSource: []
       }
    }

     componenetWillMount(){
        axios.get('http://localhost:8080/tree')
                .then(response => {
                      /*
                      тут думаем, нужно ли нам использовать jquery плагин treeview, скорее всего нам это не нужно
                      потому что, для того что бы заставить работать плагин jquery в реакте, необходимо прибегать к хакам архитектуры
                      например тулить дополнительные <script></script> в основной файл...
                      Проще найти компонент построения дерева для реакта, или для того что бы лучше освоить реакт, 
                      написать такой компонент самостоятельно. Пример готового компонента для построения дерева 
                       https://github.com/chenglou/react-treeview 
                      */
                })
                .catch(error => {
                      console.log(error);
                });
     }

     render(){
           return(
                 <div>
                       {
                             //выводим результат работы компонента дерева
                       }
                 </div> 
           );
     }
} 
9 май 18, 13:43    [21397826]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
DNShark
Member

Откуда:
Сообщений: 237
Тshаmil,

Это package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "react-ui-tree": "^3.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}


а web-pack-js в проекте у меня нет), я его не ставил.
9 май 18, 14:08    [21397868]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
DNShark
Member

Откуда:
Сообщений: 237
Тshаmil, компоненту поменять в принципе можно, единственное условие, что тот json дерева что приходит от сервера изменению не подлежит. А я смотрел там в компонентах, он немного другого вида, чем в родном jquery. Или можно будет его потом подогнать?
9 май 18, 14:16    [21397877]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
DNShark
Member

Откуда:
Сообщений: 237
Тshаmil,

Спасибо большое за ответу. Буду пробовать
9 май 18, 14:18    [21397881]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
Тshаmil
Member

Откуда:
Сообщений: 15321
DNShark
Тshаmil, компоненту поменять в принципе можно, единственное условие, что тот json дерева что приходит от сервера изменению не подлежит. А я смотрел там в компонентах, он немного другого вида, чем в родном jquery. Или можно будет его потом подогнать?


можно написать метод-адаптер, например так:
import React, {Component} from 'react';
import axios from 'axios';

export default class TreeComponent extend React.Component
{

    constructor(props){
        super(props);
        
        this.state = {
          dataSource: []
       }
    }

     componenetWillMount(){
        axios.get('http://localhost:8080/tree')
                .then(response => {
                      const data = this.dataAdapter(response.data);
                      
                      //передаем данные в state для дальнейшего использования в стороннем компоненте дерева
                      this.setState({
                            dataSource: data
                      }); 
                })
                .catch(error => {
                      console.log(error);
                });
     }

     dataAdapter(data){
          let adaptedData = [];
          
          for(let key in data) {
              //преобразуем data[key] к нужному виду
              const adaptedItem = {};

              //кладем в возвращаемый массив
              adaptedData.push(adaptedItem);
          }

          return adaptedData;
     }

     render(){
           return(
                 <div>
                       {
                             //выводим результат работы компонента дерева
                       }
                 </div> 
           );
     }
} 
9 май 18, 17:37    [21398114]     Ответить | Цитировать Сообщить модератору
 Re: Переписать дерево с js на jsx  [new]
DNShark
Member

Откуда:
Сообщений: 237
Тshаmil,

о, круть спасибо большое !!!
10 май 18, 13:24    [21399778]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить