Как реквизит и состояние работают в REACTjs? - PullRequest
Новая
       101

Как реквизит и состояние работают в REACTjs?

0 голосов
/ 30 января 2020

Я новичок в reactjs. Я действительно не понимаю, как реквизит и состояние работает. Из моего исследования я обнаружил, что реквизит передается от родителя к ребенку. И состояния могут использоваться только в одном компоненте. Но когда я вижу эти коды ниже, я понятия не имею, как это работает. Может кто-нибудь дать мне хороший пример и объяснение. Спасибо

Мало того, в чем разница между let и var 

default class WildList extends React.Component {

    constructor(props){
    super(props);
    this.props = props;

    let {keyword, dealstatus} = this.props;

    this.state = {
    keyword
    }
    }

    }

PS = Этот класс WildList используется в другом компоненте как хорошо.

Ответы [ 4 ]

1 голос
/ 30 января 2020

Простое состояние указывается c для одного компонента. Вы можете определить свойства в государстве. Как только вы измените состояние с помощью setstate , страница снова будет отображаться. пример для реквизита ниже. 

export default class Devices extends Component {
 constructor(props) {
    super(props);
    this.state = {
      userName: "Name 1",
      itemCount: 0, // this property can use within the Devices Component not in Device detail
     }
  }

  render() {
     .....
     //you can pass username to DeviceDetail page 
     <div>
          <DeviceDetail userName={this.state.userName} />
     </div>
}
}

//Inside DeviceDetail class
export default class DeviceDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userName: props.userName, //you can call username using props
        }
    }
}

Var vs let 

  getAllDevices = () => {
    var totalDevicesCount = 0; //  property is initially in the global scope. 

    let apiUrl = ....URL
    var response = fetch(apiUrl);
    const data = response.json();
    totalDevicesCount = data.length;

    if (data.length > 0) {
      this.state.itemCount = totalDevicesCount; // Since this is Var can use inside different block as well but inside this if condition you cannot use apiUrl. because it's let
    }

  }
0 голосов
/ 30 января 2020

State и Props объяснены здесь

И пусть и var объяснены здесь

, и вы должны использовать функцию поиска и всегда просто один вопрос.

0 голосов
/ 30 января 2020

В React, State содержит информацию о происходящем или значениях компонента, в котором он используется. Мы можем прочитать значение из state, также можно установить значение в state.

С другой стороны, Props только для чтения. Которые передаются от родительского компонента для совместного использования state родительского компонента с дочерним. Вы можете изменить свой сценарий следующим образом: 

default class WildList extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        keyword: this.props.keyword
      }
    }
 }

Надеюсь, это поможет вам.

0 голосов
/ 30 января 2020

Состояние - это данные, хранящиеся внутри компонента. Он локальный или принадлежит указанному c компоненту. Сам компонент обновляет состояние с помощью функции setState.

Props - данные, переданные из родительского компонента. props доступны только для чтения в дочернем компоненте, который их получает. Однако функции обратного вызова также могут быть переданы, которые могут быть выполнены внутри дочернего элемента, чтобы инициировать обновление.

Различие заключается в том, какой компонент владеет данными. Состояние принадлежит локально и обновляется самим компонентом. Реквизиты принадлежат родительскому компоненту и доступны только для чтения. Реквизиты могут быть обновлены только в том случае, если функция обратного вызова передана дочернему элементу для инициирования восходящего изменения.

...