React map 循环动态生成多个标签

周家大小姐.

于 2019-03-24 15:27:50 发布

阅读量1.2w

点赞数 1

分类专栏： React 周家大小姐

本文链接：https://blog.csdn.net/qq_40190624/article/details/88777329

版权

该博客介绍了如何在React中利用map方法遍历数据，动态地在组件中生成多个标签元素。通过父组件传递多条数据到子组件，子组件根据接收到的数据生成对应的标签展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求: 一个标签,随着多条数据动态生成多条标签元素

当前父组件引入了子组件;

父组件:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
  state = {
    persons: [
      {
        name: "周家大小姐",
      }, {
        name: "陈家大小姐",
      }, {
        name: "王家大小姐",
      }
    ],
    showPreson: false,

  };
  // 显示隐藏
  click = () => {
    const doesShow = this.state.showPreson;
    this.setState({
      showPreson: !doesShow
    })
  }
  render() {
    //定义一个空值,在else的时候使用
    let persons = null;
    if (this.state.showPreson) {
      persons = (
        <div>
          {
            this.state.persons.map((person) => {
              return (
                // 对map 循环出来的每个属性插入标签元素
                <Footer name={person.name} v-if="showPreson" key={person.name}