html - 如何使用 react-json-to-table 呈现可点击的 url?
问题描述
我是编码新手,我正在使用 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
感谢您的帮助,如果我做了一些英语或代码可憎,我们深表歉意。
解决方案
推荐阅读
- kubernetes - Calico 节点不为命令“/bin/calico-node -felix-ready”返回任何内容
- jenkins - 选择一个后显示新参数
- python - python django:如何修复错误提示:AttributeError at / 'Home' object has no attribute 'get'
- javascript - React history.push() 正在更新 url 但不呈现页面?
- javascript - 为什么我没有使用 Wappalyzer 在我的网站上检测到 Wordpress 和 Elementor?
- python - how to reslove TypeError: 'float' object cannot be interpreted as an integer
- perl - 在 @INC 中找不到 URI/Encode.pm - Centreon
- timer - 如何根据 esp32 arduino(步进电机控制器应用程序)的需要删除和重新启动硬件定时器(用于中断)
- ios-frameworks - 自定义框架:dyld:找不到符号:_$s11CryptoSwift7PaddingO5pkcs7yA2CmFWC
- node.js - 如何在 Node.js 中使用 Got 获得重定向的最终 url