不读取 props 变量属性的原因是什么？

Question

我从 this.props 中删除了这个。但现在本地主机中没有显示任何内容。我正在尝试写一个博客页面来做出反应。这是我的 blog.js：import React from 'react'const Blog=props=>{    const {title,author,content}=this.props    return(        <div>         <h2>{title}</h2>              <h5><i>{author}</i></h5>              <br/>              <h3>{content}</h3>                  </div>    )}export default Blog我的 App.js 如下：import React,{Component} from 'react';import Blog from './Blog'class App extends Component {    render(){        const posts=[            {                title:'First',                author:'Anonymous',                content:'first Post',            },            {                title:'Second',                author:'Anonymous',                content:'Second Post',            },            {                title:'third',                author:'Anonymous',                content:'Second Post',            },        ]            return (                  <div className="container">                    <Blog postData={posts}/>                </div>            );        }    }export default App ;虽然我执行 npm start 没有错误，但在浏览器中它说：TypeError: Cannot read property 'props' of undefinedBlogC:/Myfiles/python/Django/djangorest/booklearn/test-cases/src/Blog.js:5  2 |   3 |   4 | const Blog=props=>{> 5 |     const {title,author,content}=this.props  6 |     return(  7 |           8 |         <div>我的选择已经不多了。我该如何解决这个问题？我最近开始使用 reactjs。任何建议将不胜感激。

Answer 1

您正在使用功能组件并props作为参数传入您的函数 ( props =>)。你不需要使用this.propsjust propswill work。

您正在传递一个名为“postData”的帖子数组。在您的博客组件中，您需要：

import React from 'react'

const Blog=props=>{

return props.postData.map((post) => {

const { title, author, content } = post;

return (

  <div key={title}>

         <h2>{title}</h2>

              <h5><i>{author}</i></h5>

              <br/>

              <h3>{content}</h3>

                  </div>

    );

});

}

export default Blog;

Answer 2

删除this，因为它不是一个类，并且 props 作为函数的第一个参数传递。

import React from 'react'

const Blog = (props) => {

    const { title,author,content } = props;

    return(

        <div>

         <h2>{title}</h2>

              <h5><i>{author}</i></h5>

              <br/>

              <h3>{content}</h3>

                  </div>

    )

}

export default Blog