Как сделать кликабельные URL-адреса с использованием response-json-to-table? - PullRequest
Новая
       15

Как сделать кликабельные URL-адреса с использованием response-json-to-table?

1 голос
/ 13 мая 2019

Я новичок в кодировании, и я создаю веб-приложение, используя реагирование.Мне нужно визуализировать виджет, который содержит таблицу для отображения данных, которые поступают из серверной части в формате JSON.Таблица будет динамически меняться со временем и всегда будет отличаться.

Я нашел библиотеку, которая могла бы работать на меня:

https://github.com/thehyve/react-json-to-table

Она работает как чудеса, ноЯ не могу сделать кликабельные URL в таблицах.Кто-то может помочь мне это заархивировать?

у меня есть такие данные: 

{
    "Loaded by": "Jills",
    "Load id": 34,
    "git id": "xxqaygqertqsg98qhpughqer",
    "Analysis Id": "7asdlnagsd98gfaqsgf",
    "Load Date": "July 12, 2018",
    "Data Source": "Study XY123-456",
    "Jira Ticket": "Foo-1",
    "Confluence URL": "http://myserver/wxyz"
  }

мой компонент выглядит так: 

export default class TableWidget  extends BaseWidget {



constructor(props) {
    super(props);
    const { data } = this.props;
    const data2 = data;


    this.state = {
      data: this.getData(data2)
    };

    this.handleResize = this.handleResize.bind(this);
}

componentWillMount() {
    super.componentWillMount();
    this.props.socket.on(`widget:update:${this.props.jobName}:${this.props.name}`, datas => {
      logger('info', `updating widget: ${this.props.jobName}:${this.props.name}`, datas);
      this.setState({
        data: this.getData(datas.value),
      });
    });
}


getData(data) {

  const demoJson = {
    "Loaded by": "Jills",
    "Load id": 34,
    "git id": "xxqaygqertqsg98qhpughqer",
    "Analysis Id": "7asdlnagsd98gfaqsgf",
    "Load Date": "July 12, 2018",
    "Data Source": "Study XY123-456",
    "Jira Ticket": "Foo-1",
    "Confluence URL": "http://myserver/wxyz"
  };

  if (data == null )
    return demoJson;
  else 
    return data;
}

  static get layout() {
return {
  x: 0,
  y: 0,
  w: 4,
  h: 3,
  minH: 3,
  maxH: 40,
  minW: 4,
  maxW: 10,
};
  }

  static get className() {
    return 'TableWidget';
}

  handleResize() {
this.chart.reflow();
  }


render() {

    const classList = classNames(...this.classList, 'widget', 'widget__table',);
    return (
      <div className={classList}>
        <h1 className="widget__title">{this.props.title}</h1>
        <JsonToTable json={this.state.data} /> 


            </div>
    );
}

}


 TableWidget.propTypes = {   
title: PropTypes.string.isRequired,
  };

таблица хорошо отрисовывается, но я хочу быть albe to clikcна "URL конференции".как мне это заархивировать?

может быть, я мог бы использовать одну из этих двух библиотек?

https://github.com/arqex/react-json-table

или

https://github.com/agracio/ts-react-json-table

спасибо за помощь и извините, если я сделал какие-то мерзости английского или кода.

...