node.js - 从 react.js 调用 node.js 的 api 的方法

Question

将大学的一部分爬取到node.js后，我们尝试调用node.js的一个api来react.js。

在node.js文件中，获取链接的Title和url，在react.js文件中，配置List和ListItem接收api数据。

问题是我不知道如何从react.js中调用tittle和url，它们是node.js中爬取的数据。

另外，我问是因为我不知道如何将调用的api插入react.js的列表中。

这是App.js：

import React from 'react';
import HeaderTemplate from './components/HeaderTemplate';
import MainTemplate from './components/MainTemplate';
import FooterTemplate from './components/FooterTemplate';

const App = () => {
    return (
        <div>
            <HeaderTemplate/>
            <MainTemplate/>
            <FooterTemplate/>
        </div>
        
    );
};

export default App;

这是MainTemplate.js：

import React from 'react';
import styled from 'styled-components';
import NoticesList from './NoticesList';

const MainTemplate = () => {
    const Main = {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        padding: '60px',
    };

    const Section01 = {
        margin: '25px',
        width: '55%',
        height: '80vh',
        backgroundColor: '#eeeeee',
        fontSize: '45px',
        textAlign: 'center',
    };

    const Section02 = {
        margin: '25px',
        width: '45%',
        height: '80vh',
        backgroundColor: '#ff0000',
        fontSize: '45px',
        textAlign: 'center',
    };

    return (
        <div className="Main" style={Main}>
            <div className="Section01" style={Section01}>
                비교과
                <NoticesList />
            </div>

            <div className="Section02" style={Section02}>
                튜터링 및 학공
            </div>
        </div>
    );
};

export default MainTemplate;

这是NoticesItem.js：

import React from 'react';
import styled from 'styled-components';

const NoticesItemBlock = styled.div`
    display: flex;
    .contents {
        h6 {
            margin: 15px;
            a {
                color: black;
            }
        }
    }
    & + & {
        margin-top: 1.5rem;
    }
`;

const NoticesItem = ({ article }) => {
    const { title, url } = article;
    return (
        <NoticesItemBlock>
            <div className="contents">
                <h6>
                    <a href={url} target="_blank" rel="noopener noreferrer">
                        {title}
                    </a>
                </h6>
            </div>
        </NoticesItemBlock>
    );
};

export default NoticesItem;

这是NoticesList.js：

import React from 'react';
import styled from 'styled-components';
import NoticesItem from './NoticesItem';

const NoticesListBlock = styled.div`
    box-sizing: border-box;
    padding-bottom: 3rem;
    width: 768px;
    margin: 0 auto;
    margin-top: 2rem;
`;

const sampleArticle = {
    title: 'title',
    url: 'https://google.com',
};

const NoticesList = () => {
    return (
        <NoticesListBlock>
            <NoticesItem article={sampleArticle} />
            <NoticesItem article={sampleArticle} />
            <NoticesItem article={sampleArticle} />
            <NoticesItem article={sampleArticle} />
        </NoticesListBlock>
    );
};

export default NoticesList;

标签： node.jsreactjsweb-crawler