如何在 React js 中将 props 传递给组件

Question

I'm working on a project with React JS , and I want to pass a props to an array, This is the Component:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class TaskItem extends Component {
  
  render() {
    const task = this.props.task;

    return (
        <tr>
          <Link to={`/tasks/${task.id}`}>
                {task.name}
          </Link>
        </tr>
    );
  }
}

export default TaskItem;

I want the value of {task.name} to be in the title of this array:

const todoDB = {
    todos  : [
        {
        //Proident tempor est nulla irure ad est
            'id'       : '561551bd7fe2ff461101c192',
            'title'    : ' ===> HERE <===' ,
            'notes'    : 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
            'startDate': new Date(2018, 8, 3),
            'dueDate'  : new Date(2018, 8, 5),
            'completed': false,
            'starred'  : false,
            'important': false,
            'deleted'  : false,
            'labels'   : [1]
        }
]

The array and the component are not in the same file I hope those information enough to understand my problem, THANKS

Answer 1

you could convert the todoDB.todos array to a function,pass the prop to the function and call it. sth like below:

 const todoDB = { todos: (props) => [{ 'id': '561551bd7fe2ff461101c192', 'title': props, 'notes': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.', 'startDate': new Date(2018, 8, 3), 'dueDate': new Date(2018, 8, 5), 'completed': false, 'starred': false, 'important': false, 'deleted': false, 'labels': [1] }] } console.log(todoDB.todos("this is the title")[0].title)

Answer 2

I'm not entirely clear on your requirements but the following is a function that would generate an array of tasks in the format you provided.

const generateTodoDB = todos => ({
    todos: todos.map(todo => ({
        'id'       : '561551bd7fe2ff461101c192',
        'title'    : todo.title,
        'notes'    : 'Id nulla ...',
        'startDate': new Date(2018, 8, 3),
        'dueDate'  : new Date(2018, 8, 5),
        'completed': false,
        'starred'  : false,
        'important': false,
        'deleted'  : false,
        'labels'   : [1]
    })
})

Now you just have to call the generateTodoDB function passing in an array of todos.

const myTodos = [{ title: "Get Milk" }, { title: "Get Bananas" }];
const todoDB = generateTodoDB(myTodos);

---

generateTodoDB is a so called arrow function. It automatically returns the result of its function because it's body is wrapped in parenthathese. The same is happening here with todos.map.

const fn1 = () => ({ thisObject: "gets returned" })
const fn2 = () => { return { thisObjectDoes: "not return automatically" } }