javascript - 使用 ReactJS 传递 props

Question

这似乎是一个愚蠢而明显的问题，但我似乎无法让我的 Prop 发挥作用......

谁能告诉我为什么我无法获取我传递的 props 的 console.log ？

当然，稍后我会想做更复杂的功能，但我想我会尝试先弄清楚基础知识，而不仅仅是复制 YouTube 教程

App.js

import React from 'react';
import List from './Components/list';
import Input from './Components/input';

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      error: null
    }
  }

  render() {
    return (
      <div>
        <List taskList={this.state.tasks}/>
      </div>
    )
  }

list.js

import React from 'react';
import ListBody from './ListComponents/list-body';
import ListHeader from './ListComponents/list-header';

class List extends React.Component {

  clickMe() {
    var passed = this.props.taskList
    console.log(passed);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickMe}>List Button</button>
      </div>
    )
  }

}

export default List;

Answer 1

您没有任务状态，因此您传递了一个未定义的属性。

constructor() {
    super();
    this.state = {
      error: null,
      tasks
    }
  }

请注意，任务是 shorthand对于“任务:任务”。

如果您在渲染函数上执行 console.log(this.state.tasks) 操作，您可以亲自检查这一点。