Question

我是编码的新手，我正在使用reactjs构建一个Web应用程序。我需要渲染一个包含表格的小部件，以json格式显示来自后端的数据。该表会随着时间动态变化，并且总是不同的。

我找到了一个适合我的图书馆：

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

它像奇迹一样工作，但是我无法在表格中呈现可点击的网址。有人可以帮我存档吗？

我有一些这样的数据：

{
    "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,
  };

表呈现得很好，但我想也喜欢点击“会议网址”。我该如何存档？

也许我可以使用这两个库之一？

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

或

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

感谢您的帮助，如果我做了一些英语或代码可憎的事情，对不起。

如何使用react-json-to-table呈现可点击的网址？

0 个答案: