在cdn html中导入json

问题描述 投票:0回答:1

我正在尝试创建一个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>

ideone

html json reactjs cdn
1个回答
0
投票

要从CDN读取内容,您需要HTTP客户端。您可以使用Axios或其他工具。链接到Axios:https://github.com/axios/axios

© www.soinside.com 2019 - 2025. All rights reserved.