第一次使用反应。如何将 RSS 项目放入组件中？

Question

这是我第一次使用反应。我从 jQuery 到 React 这感觉就像一个很大的飞跃。如果有人能帮我重构它以按照 React 的方式工作，我将永远欠你的债！:)

我正在尝试解析 RSS 提要，我想在其中获取最新的帖子标题和链接以呈现到组件中。

https://www.npmjs.com/package/rss-parser - 使用它来获取解析器。

在浏览器中查看我的应用程序时，异步函数将 rss 提要吐出到控制台，我想这是一个好的开始！

    // src/App/index.tsx
    import * as React from 'react';
    import * as Parser from 'rss-parser';
    // Types
    import { string } from 'prop-types';

    let parser = new Parser();

    // blueprint for the properties
    interface Props {
      name: string;
    }

    // Component state
    interface State {
        //feed: any[];
    }


    (async () => {

      let feed = await parser.parseURL('https://www.reddit.com/.rss');
      console.log(feed.title);

      feed.items.forEach((item: { title: string; link: string; }) => {
        console.log(item.title + ':' + item.link)
      });

    })();


    export default class App extends React.Component<Props, State> {
      render() {
        return (
          <div>
            <h1>RSS Feed</h1>
            <div>
              <h1>item.title</h1>
              <a href="">item.link</a>
            </div>
          </div>
        );
      }
    }

Answer 1

如果我理解你的正确，你需要这样的东西：

export default class App extends React.Component<Props, State> {
    constructor(props: {}) {
         super(props);
         this.state = { feed: [] };
    }

    async componentDidMount() {
        const feed = await parser.parseURL('https://www.reddit.com/.rss');
        this.setState({ feed });
    }

    render() {
        return (
        <div>
            <h1>RSS Feed</h1>
            this.state.feed.map((item, i) => (
                <div key={i}>
                    <h1>item.title</h1>
                    <a href="">item.link</a>
                </div>
            ))
        </div>
        );
    }
}