如何在同一个组件中使用道具？

Question

我正在寻找一个充满推文的组件。

我正在创建一个名为“tweets”的数组，我想在 return() 中访问该数组。 我知道映射，但有没有办法只在页面上显示一个？ 我认为它会像 {this.props.name} 或只是 {props.name} 但它不会向页面呈现任何内容。

如何在同一组件中将道具引用到我的页面？

推文.js

import React from 'react';

const Tweets = (props) => { 
    const tweets = [
        {name: 'Name 1',
        tweet:'This is a tweet!'},

        {name:'Name 2',
        tweet:'This is another tweet'},

        {name:'Name 3',
        tweet:'This is yet another tweet!'},
        ]

        return (
            <section>
                <h1>{this.props.name}</h1>
            </section>
        )
}


export default Tweets;

Answer 1

您的推文位于组件本身内部，它们不是来自道具。 因此，您可以使用以下方式访问单个值：

{tweets[0].name}

如果要全部显示，可以执行以下操作：

  return (
      <section>
        {
          tweets.map(({name, tweet}) => (
            <div>
              <h1>{name}</h1>
              <p>{tweet}</p>
            </div>
          ))
        }
          
      </section>
  )