2

我必须创建一种新闻网络应用程序。我正在使用 NewsAPI.org 进行 API 调用。我在一个页面中有一个新闻频道列表，单击任何一个频道都应该在另一页上呈现来自该新闻频道的特定内容。我有一些关于使用 react-router 的信息，但我想在处理外部域 url 时没有使用。我无法弄清楚如何实现这一点。我在这里使用过axios。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { fetchSourceList } from '../actions';

class SourceList extends Component{

  componentDidMount(){
     this.props.fetchSourceList();
  }

  renderList(){
   let {lists} = this.props;
   let returnHTML = [];
   for(let key in lists){
     lists[key].map((item)=>{
       returnHTML.push(
        <li className="list-group-item" key={item.id}>
            <a href={item.url}>{ item.name }</a>
        </li>
       );
     });
   }
   return returnHTML;
}

  render(){
    return (
      <div>
         <ul className = "list-group">
         <li className = "list-group-item text-light bg-dark"><h3>Sources</h3></li>
           {this.renderList()}
         </ul>
      </div>

    );
  }
}

function mapStateToProps(state){
  return { lists: state.sourceList };
}

export default connect(mapStateToProps, { fetchSourceList })(SourceList);
4

1 回答 1

0

您必须使用如下路由器：

/news/:type

news是一个路由，type是一个参数。

在新闻路由中，您将始终呈现相同的组件来呈现 API 响应，而您将使用类型参数来切换频道并提供用于获取 API 的服务。这也将允许用户复制/粘贴频道 URL，或将其添加为书签。

于 2018-12-21T10:35:19.770 回答