Question

我刚开始在iOS上使用React native来查看它的感觉，我有一个愚蠢的问题.. 我看到每个人都在谈论＆＃34; Props＆＃34;，每当我阅读文章或教程时，作者都会使用这个术语，并且在代码中也是如此。例如，在类声明中，我经常看到构造函数，如：

class MyClass extends Component {

    constructor(props) {
        super(props);
        this.state = { message: '' };
    }
}

我无法找到道具是什么的明确解释，有人可以启发我吗？

Answer 1

props是传递给React组件的值。因此，只要你有一个组件，你就会看到类似的东西：

<MyComponent value1={value1} isTrue={true} />

Answer 2

除了Keith的答案，您可以在下面找到使用“颜色”的非JSX版本。属性。

// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

Answer 3

React Props是从一个React组件传递到另一个（在组件层次结构中）的只读参数。

假设您有两个组件-应用程序和列表。然后，在App内，我们有一个包含开发人员信息的列表。如果我们想将数组传递给List组件，我们会做类似（<List list={developers} />）

import React from 'react';

const App = () => {
  const developers= [
    {
      id: 1,
      name: 'Randy'
    },
    {
      id: 2,
      name: 'Tiago Peres'
    },
  ];

  return (
    <div>
      <h1>Developers in StackOverflow</h1>

      <List list={developers} />
    </div>
  );
};

const List = props =>
  props.list.map(item => (
    <div key={item.id}>
      <span>{item.name}</span>
    </div>
  ));

export default App;

这将是结果

使用此方法，我们不需要在全球范围内拥有太多信息。

如果您想进一步了解它，我建议您阅读great article from Robin Wieruch。

要理解您提到的特定情况，必须了解React的一些基础知识以及ECMAScript 6（ES6）。基于W3Schools's React Tutorial的内容，

通过类继承创建的类将从另一个类继承所有方法。
要创建类继承，我们使用extends关键字。
您正在创建一个名为MyClass的类，该类将继承Component类的方法。
类的属性在constructor()方法内部分配
初始化对象时会自动调用构造函数。
super()方法引用父类，因此执行父组件的构造函数。
如果组件具有构造函数，则应始终通过super()方法将道具传递给构造函数以及React.Component。
super(props)将调用Component构造函数，并传入prop作为参数。
While most likely you could just use super()，使用super(props)可以确保this.props甚至在构造函数退出之前就已设置。
即使在您的情况下，state对象仅具有message属性，您也可以随意设置。
您可以在组件中的任何位置使用this.state.message。

Answer 4

道具：道具只不过是组件的属性，而react组件只不过是JavaScript函数。道具是一成不变的。您可以在组件之间传递道具。可以将道具从父组件直接传递给子组件。为了从孩子传给父母，您需要使用提升状态的概念。

class Parent extends React.Component{
  render()
  {`enter code here`
     return(
        <div>
            <Child name = {"Sara"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

究竟是什么＆＃34; Prop＆＃34;在React？

4 个答案: