使用 React 组件传递道具时出现问题

Question

我需要能够将函数作为 props 传递给我的 'Tasks' 组件（参见下面的代码），但由于我构建项目的方式，我不能。关于如何将 {taskItems} 更改为 Tasks 实例的任何提示，以便我可以将道具从 App.jsx 传递到 Tasks.jsx，同时不破坏我的应用程序的其余部分？

// App.jsx

import React, {useState} from 'react';
import Header from './Header'
import Card from './Card'
import cardData from './cardData'
import Dates from './Dates'
import Tasks from './Tasks'
import Footer from './Footer'


const initialState = [
  {
      id: 8,
      chore: 'wash dishes'
  },
  {
      id: 9,
      chore: 'do laundry'
  },
  {
      id: 10,
      chore: 'clean bathroom'
  }

]

function App() {

  const [taskList, setUpdatedTasks] = useState(initialState)

  const cardComponents = cardData.map(card => {
    return <Card key={card.id} name={card.name} />
  })


  const taskItems = taskList.map(item => {
    console.log(item)
    return <Tasks key={item.id} task={item.chore} />
  })

  const updateHandler = (thing) => {

  }

  return (
    <div>
      <Header />
      <Dates />
      <div className='card-container'>
        {cardComponents}
      </div>
      {taskItems} // how would I change this to an instance of <Tasks/> ?
      <div>
        <Footer />
      </div>
    </div>
  )
}

export default App;

Answer 1

好吧，TaskItem 是您 App 中的另一个组件，它也应该接收您要作为道具传递给它的功能，所以它会像这样

// App.jsx

import React, {useState} from 'react';
import Header from './Header'
import Card from './Card'
import cardData from './cardData'
import Dates from './Dates'
import Tasks from './Tasks'
import Footer from './Footer'


const initialState= [
  {
      id: 8,
      chore: 'wash dishes'
  },
  {
      id: 9,
      chore: 'do laundry'
  },
  {
      id: 10,
      chore: 'clean bathroom'
  }

]

function App() {

  const [taskList, setUpdatedTasks] = useState(initialState)

  const cardComponents = cardData.map(card => {
    return <Card key = {card.id} name = {card.name}/>
  })


  const taskItems = ({updateHandler}) =>
taskList.map(item => {
    console.log(item)
    return <Tasks key={item.id} task ={item.chore} updateHandler={updateHandler}/>
  })

  const updateHandler = (thing) => {

  }

  return (
    <div>
      <Header/>
      <Dates/>
      <div className = 'card-container'>
        {cardComponents}
      </div>
      {taskItems} **// how would I change this to an instance of <Tasks/> ?**
      <div>
        <Footer/>
      </div>
    </div>
  )
}

export default App;

Answer 2

其实这个问题来自于你的思维方式，ReactJS 并不像你想的那样，ReactJS 项目中的每个组件都是一个函数，而忘记了 OOP 原则。一个实例在这里没有意义。你可以尽可能简单地做到这一点，将你的函数像道具一样传递给 Tasks.jsx 组件：

~~~

function App() {

  const [taskList, setUpdatedTasks] = useState(initialState)

  const cardComponents = cardData.map(card => (
    <Card key={card.id} name={card.name} />
  ));


  const taskItems = taskList.map(item => (
      <Tasks
        key={item.id}
        task={item.chore}
        func={setUpdatedTasks} // <--- Here
      />
    );
  });

~~~

使用 React 组件传递道具时出现问题

Problems passing props withing react component

javascript

reactjs

react-props