5

我刚开始在 iOS 上使用 React Native 看看感觉如何，我有一个愚蠢的问题。我看到每个人都在谈论“Props”，每当我阅读文章或教程时，作者都会大量使用这个术语，它是在代码中相同。例如，在类声明中，我经常看到如下构造函数：

class MyClass extends Component {

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

我找不到关于什么是道具的明确解释，有人能告诉我吗？

4

4 回答 4

5

props 是传递给 React 组件的值。因此，只要您有一个组件，您就会看到如下内容：

<MyComponent value1={value1} isTrue={true} />
于 2016-04-05T11:17:11.850 回答
3

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

// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
于 2016-04-05T11:32:57.740 回答
1

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

这将是结果

反应道具 StackOverflow

使用它，我们不需要在全局范围内拥有太多信息。

如果您想了解更多信息，我建议您阅读Robin Wieruch 的一篇很棒的文章。

要了解您提到的具体案例，必须了解一些 React 基础知识以及 ECMAScript 6 (ES6)。基于W3Schools 的 React 教程中的内容，

  • 使用类继承创建的类会继承另一个类的所有方法。
  • 要创建类继承，我们使用extends关键字。
  • 您正在创建一个名为的类MyClass，它将继承Component该类的方法。
  • 类的属性在constructor()方法内部分配
  • 初始化对象时会自动调用构造函数。
  • 该super()方法引用父类，因此执行父组件的构造函数。
  • 如果组件具有构造函数，则应该始终将 props 传递给构造函数，并通过该super()方法传递给 React.Component。
  • super(props)将调用Component传入 props 作为参数的构造函数。
  • 虽然您很可能只使用super()，但使用super(props)ensurethis.props甚至在构造函数退出之前就已设置。
  • 即使在您的情况下该state对象只有message属性，您也可以拥有任意数量的属性。
  • 您可以this.state.message在组件中的任何位置使用。
于 2020-07-03T14:11:28.017 回答
0

Props ：Props 只不过是组件的属性，而 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>
      );
     }
}
于 2019-12-02T09:35:41.327 回答