React 中的 "Prop" 到底是什么？

Question

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

class MyClass extends Component {

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

我找不到什么是 prop 的明确解释，谁能给我讲讲？

Answer 1

props 是您传递给 React 组件的值。所以每当你有一个组件时，你都会看到这样的东西：

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

Answer 2

除了 Keith 的回答之外，您还可以在下面找到使用 'color' 属性.

的非 JSX 版本

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

Answer 3

Props ：Props 只不过是属性组件，而 React 组件不过是 JavaScript 函数。道具是不可变的。您可以在 components.You 之间传递道具，也可以将道具从 parent 组件直接传递到 child 组件。要从 child 传递到 parent，您需要使用提升状态的概念。

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>
      );
     }
}

Answer 4

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

假设您有两个组件 - App 和 List。然后，在 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 Whosebug</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、

中的内容

使用 class 继承创建的 class 继承了另一个 class 的所有方法。
要创建 class 继承，我们使用 extends 关键字。
您正在创建一个名为 MyClass 的 class，它将继承 Component class.
class 的属性在 constructor() 方法中赋值
初始化对象时自动调用构造函数。
super()方法引用父组件class，因此执行父组件的构造函数。
如果组件有构造函数，props 应该总是传递给构造函数，也应该通过 super() 方法传递给 React.Component。
super(props) 会调用 Component 构造函数，传入 props 作为参数。
While most likely you could just use super()，使用 super(props) 确保甚至在构造函数退出之前设置 this.props。
即使在您的情况下 state 对象只有 message 属性，您可以拥有任意多个。
您可以在组件的任何地方使用 this.state.message。

React 中的 "Prop" 到底是什么？

What exactly is a "Prop" in React?

reactjs

react-native

react-props