Question

我是React.js的新手，所以我仍在尝试了解构造函数如何使用它。

我有一个默认的构造函数，将name属性设置为“ Ryan”。但是，当我创建Greeting组件时，默认情况下名称未设置为Ryan。我想念什么？

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {

    constructor(props)
    {
      super(props);
      this.props.name = 'Ryan';
    };

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting/>
        <Greeting name='Rexxar' />
        <Greeting name='Jainaa' />
        <Greeting name='Valeera' />
        <Greeting/>
      </View>
    );
  }
}

这是结果

Hello ! 
Hello Rexxar! 
Hello Jainaa! 
Hello Valeera!
Hello !

应该是

    Hello Ryan! 
    Hello Rexxar! 
    Hello Jainaa!
    Hello Valeera! 
    Hello Ryan!

Answer 1

将props视为传递给组件的只读值。

您似乎想在未传递道具时设置默认值。

在这种情况下，您需要在其他地方设置默认值，而不是更新道具。

class Greeting extends Component {
    constructor(props)
    {
      super(props);
    };

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name || 'Ryan'}!</Text>
      </View>
    );
  }
}

在上面的代码中，this.props.name虚假时使用“ Ryan”。

或者您可以使用defaultProps。

class Greeting extends Component {
    static defaultProps = { name: 'Ryan' };

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

Answer 2

React组件永远不要修改自己的道具。从文档中：

反应非常灵活，但是有一个严格的规则：

所有React组件在其道具方面都必须像纯函数一样发挥作用。

来源： https://reactjs.org/docs/components-and-props.html

您应该改为操纵状态。您可以从以下文档中获得状态的概述：

https://reactjs.org/docs/state-and-lifecycle.html

Answer 3

尝试一下。
然后阅读the official document有关构造函数和道具的信息。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name || 'Ryan'}!</Text>
      </View>
    );
  }
}

实例化组件时，React中的构造方法没有被调用

3 个答案: