我正在尝试创建一个react-cdn网页,该网页会导入json文件并读取该文件。但是问题出在节点反应上,我可以用这种格式写import './something'
。我不知道CDN。所以我的代码什么也没做,只会给我一个黑页。
我该如何解决?
代码:
<!DOCTYPE html>
<html>
<head>
<title>timeline</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<div id="root" />
<script type="text/babel">
const TimelineItem = ({ data }) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: data.category.color }}>
{data.category.tag}
</span>
<time>{data.date}</time>
<p>{data.text}</p>
{data.link && (
<a href={data.link.url} target="_blank" rel="noopener noreferrer">
{data.link.text}
</a> )}
<span className="circle" />
</div>
</div>
);
import timelineData from './data.json';
const Timeline = () => timelineData.length > 0 && (
<div className="timeline-container">
{timelineData.map((data, idx) => (
<TimelineItem data={data} key={idx} /> ))}
</div>
);
class MyTimeLine extends React.Component { render(
<TimeLine/>
) { } }
ReactDOM.render(<MyTimeLine />, document.getElementById('root') );
</script>
</body>
</html>
要从CDN读取内容,您需要HTTP客户端。您可以使用Axios或其他工具。链接到Axios:https://github.com/axios/axios