this.props 是什么（Meteor 与 React 教程）答案

【问题标题】：What is this.props (Meteor with React Tutorial)this.props 是什么（Meteor 与 React 教程）
【发布时间】：2016-09-16 20:43:48
【问题描述】：

我刚开始使用 es6 通过 React 学习 Meteor，但我无法理解 this.props。它从何而来？我没有任何代码我自己为类定义它。提前谢谢你。

这是我在 simple-todos/imports/ui/App.jsx 中的一部分代码：

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';

import { Tasks } from '../api/tasks.js';

import Task from './Task.jsx';

class App extends Component { 
  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
}

【问题讨论】：

你阅读过 React 文档吗？ facebook.github.io/react/docs/tutorial.html#using-props

标签： meteor reactjs properties ecmascript-6

【解决方案1】：

此 props 包含在创建时传递给组件的属性。例如：

<SomeComponent someProperty={'foo'} />

现在在SomeComponent 内，您现在可以以this.props.someProperty 的身份访问someProperty

阅读更多关于使用道具here。

【讨论】：

谢谢，这样对吗？ <someComponent someProperty={'foo'} /> 标记调用 someComponent 的构造函数，它创建一个 JSON 对象（键值对表）。然后将 JSON 对象转换为 props，即当前组件的成员。所以this.props 包含您传递给标签的所有属性（例如someProperty={'foo'}）以及任何默认属性。每当您想访问该组件 (SomeComponent) 的属性时，您都必须通过 this.props.someProperty 访问它。
听起来不错，但我会留下链接的文档来回答技术问题。
但是tasks在simple-todos教程的组件中没有传入任何对象，那它为什么知道this.props.tasks

【解决方案2】：

它允许您制作更多“任意”组件。例如，假设您有一个从服务器获取的列表。

export default class List extends Component {
  static propTypes = {
    data: PropTypes.array.isRequired
  }
  render() {
    return (
      //you can now be sure that the proptypes are what you wanted them to be.
    )
  }
}

这样，您可以将data 的数组传递给该组件

<List data={users} />

【讨论】：