powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переписать дерево с js на jsx
8 сообщений из 8, страница 1 из 1
Переписать дерево с js на jsx
    #39642304
DNShark
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
в общем не получается переписать запрос получения дерева с js на jsx под React

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

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

скрипт:


Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
 
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. Спасибо большое
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642325
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DNSharkв общем не получается переписать запрос получения дерева с js на jsx под React

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

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

скрипт:


Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
 
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
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642335
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ну и раз уж речь пошла о реакте то код необходимо оформлять в виде компонента, использовать jquery вместе с реактом - не совсем кошерно, особенно для таких вещей как ajax, вместе с реактом для ajax используют, как правило, axios:

устанавливаем
Код: javascript
1.
npm i axios -S



используем

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
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> 
           );
     }
} 
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642343
DNShark
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Тshаmil,

Это package.json

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
{
  "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 в проекте у меня нет), я его не ставил.
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642345
DNShark
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Тshаmil, компоненту поменять в принципе можно, единственное условие, что тот json дерева что приходит от сервера изменению не подлежит. А я смотрел там в компонентах, он немного другого вида, чем в родном jquery. Или можно будет его потом подогнать?
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642347
DNShark
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Тshаmil,

Спасибо большое за ответу. Буду пробовать
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642393
Фотография Тshаmil
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DNSharkТshаmil, компоненту поменять в принципе можно, единственное условие, что тот json дерева что приходит от сервера изменению не подлежит. А я смотрел там в компонентах, он немного другого вида, чем в родном jquery. Или можно будет его потом подогнать?

можно написать метод-адаптер, например так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
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> 
           );
     }
} 
...
Рейтинг: 0 / 0
Переписать дерево с js на jsx
    #39642620
DNShark
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Тshаmil,

о, круть спасибо большое !!!
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Переписать дерево с js на jsx
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]