Question

在我的create-react-app项目中，我无法解决几个概念问题。

我有三个部分：“博客”，“博客”和“完整博客”。博客是具有国家一类组件。它是从一个API拉博客条目。博客是一个功能组件，其中的JSX带有针对每个单独博客条目的支持。我有各代码如下：

博客成分：

import React, { Component } from 'react';
import Blog from './Blog/Blog';
import './Blogs.css';

class Blogs extends Component {
    constructor(){
        super();
        this.state={
            content: ''
        }
    }

    componentDidMount(){
        fetch(URL)
        .then(res => res.json())
        .then(data => this.setState({
            content: data
        }));
    }
  render() {

    const [...content] = this.state.content;


    const blogs = content.map(post => {
        const date = post.date.split("T")[0]

        return(
            <Blog key= {post.id}
                excerpt={post.excerpt.rendered}>
                <h4 className="post-title">{post.title.rendered}</h4>
                <span className="post-date">Published on: {date}</span>
            </Blog>
        )

    })


    return (
      <section id="blog">
        <div className="container">
            <h3>Blog</h3>
            { blogs }
        </div>
      </section>
    )
  }
}

export default Blogs

博客组件：

import React from 'react'
import './Blog.css'


const Blog = (props) => {
  console.log(props.path)
  return (
    <React.Fragment>
        <div className="blog-blurb">
          {props.children}
          <div dangerouslySetInnerHTML={{ __html: props.excerpt}}></div>
          <a href="/" className="btn-flat post-button">Read More</a>
        </div>
        <hr></hr>
    </React.Fragment>




  )
}

export default Blog

这两个组件实现的我的目标，这是在我的主要成分，App.js列表部分，即节目标题，日期，摘录和读取更多的按钮。

我现在的问题是如何使通过“FullBlog”组件到一个新的页面了解更多按钮，铅，显示整个博客文本那里。

更具体地说，我在哪里引入react-router-dom？如何将Blog中的状态（包括全文）传递给FullBlog组件？是否可以使用Router创建自定义链接，以导致用户正在查看的帖子的/ blog / id。最后，我该如何从FullBlog组件中返回登录页面按钮？

在React中单击按钮后显示博客的全文

0 个答案: