如何在reactjs中将数组从父组件传递给子组件

Question

我的项目中有两个组件，第一个组件是 App 我在创建项目时得到了这个 App 组件。 Second Component 是 ClassRoom。现在在 App.js 中，我有一个数组，在那个数组中，我有四个不同的名字。现在我必须为我的子组件 ClassRoom 传递这四个名称。我知道如何将对象数组循环到 React。但我不知道如何循环数组并将该数组传递给子组件，所以请帮助我完成此任务。

这是App.js

import React from 'react';
import './App.css';
import ClassRoom from './ClassRoom/ClassRoom';

function App() {
  const students = ['shiva', 'krishna', 'ram', 'madhav']
  return (
    <div className="App">
     <ClassRoom></ClassRoom>
    </div>
  );
}

export default App;

这是App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

这是ClassRoom.js

import React, { Component } from 'react'
import './ClassRoom.css'

export default class ClassRoom extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

这是ClassRoom.css

There is no css in ClassRoom.css

我的预期输出是我需要将学生数组从 App.js 的父组件传递到 ClassRoom.js 的子组件。如果没有，请清除我的疑问，请发表评论。

Answer 1

就这样<ClassRoom students={students}/>

并且在 ClassRoom 组件中使用 this.props.students

访问它

Answer 2

在App.js

function App() {
  const students = ['shiva', 'krishna', 'ram', 'madhav']
  return (
    <div className="App">
     <ClassRoom studentsArray = { students } />
    </div>
  );
}

在ClassRoom.js

export default class ClassRoom extends Component {
    render() {
        return (
            <div>
              <ul>
               {this.props.studentsArray.map( student => `<li> ${student} </li>` )}
             </ul>
            </div>
        )
    }
}

Answer 3

如果您的 ClassRoom 组件是功能组件，则使用此组件。

<ClassRoom students={students}/>

 function ClassRoom(props) {
    render() {
        return (
            <div>
                {props.students}
            </div>
        )
    }
}

export default ClassRoom;

在功能组件中使用 props.students，在 class 组件中使用它。props.students

如何在reactjs中将数组从父组件传递给子组件

How to pass Array from Parent component to Child component in reactjs

reactjs