Передача свойств и состояния дочернему компоненту - PullRequest
Новая
       10

Передача свойств и состояния дочернему компоненту

1 голос
/ 18 июня 2020

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

Прямо сейчас у меня есть константа с именем BookComponents, которая принимает книгу и записывает в состояние. Я застрял в передаче состояния и свойств в мой компонент BookTable, чтобы я мог отображать книги в таблице книг, а не на главной странице. Заранее спасибо за вашу помощь и советы.

MainPage: 

import React from 'react';
import type { User, BookType } from '/types';
import Book from './Book';
import BookTable from './BookTable';

type Props = {};

type State = {
  selectedUser: <User> | null,
  books: BookType[]
};

export default class BookPage extends React.PureComponent<Props, State> {
  const BookComponents = this.state.book.map((book) => <Book {...book} />);
  const selectedUser = this.state.selectedUser;

  return (
  <div>

    <div>
      Find Users and their Books
      <Selector
        input={{
          onChange: this.onSelect,
          value: selectedUser,
        }}
        getValue={(user) => user.full_name}
      />

      {selectedUser && (
      <Section>
        <H1>
          {selectedUser.full_name}'s Books
        </H1>
        {BookComponents}
        <BookTable/>
      </Section>)}
    </div>
  </div>
  )
}

Код BookTable: 

import React from 'react';
import type { User } from '/types';

type Props = {};

type State = {};

export default class BookTable extends React.PureComponent<Props, State> {
  render() {
  return (
    <Section>
      <H1>
        Print User's books here
      </H1>
    </Section>
  );
 }
}

Ответы [ 2 ]

2 голосов
/ 18 июня 2020

Если я вас правильно понял, вы просто хотите передать состояние свойствам компонента, ничего больше?

При рендеринге MainPage: 

<BookTable books={this.state.book} />

В BookTable: 

type Props = {
  books: BookType[]
};

export default class BookTable extends React.PureComponent<Props, State> {

  static defaultProps = {
    books: []
  }

  render() {
  return (
    <Section>
      <H1>
        {this.props.books.map((book) => <Book {...book} />)}
      </H1>
    </Section>
  );
 }
}
0 голосов
/ 18 июня 2020

Попробуйте передать состояние и свойства из родительского компонента в дочерний компонент следующим образом.

В родительском компоненте передать значения дочернему компоненту. 

<BookTable stateaData={this.state} propsData={this.props}/>

В дочерний компонент, получите указанные выше реквизиты следующим образом. 

this.props.stateaData
this.props.propsData
...