将道具和状态传递给子组件答案

【问题标题】：Passing props and state to child component将道具和状态传递给子组件
【发布时间】：2020-10-08 22:32:48
【问题描述】：

我正在尝试拆分我的应用程序中的组件，但在理解如何将状态和道具从我的父组件传递到子组件时遇到了一些麻烦。对于上下文，我的子组件是一个表格，它在行中呈现一个较小的组件。

现在我有一个名为 BookComponents 的常量，它接受一本书并写入状态。我被卡住的地方是将状态和道具传递到我的 BookTable 组件中，以便我可以在书表中而不是在主页中呈现书籍提前感谢您的帮助和提示。

主页：

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

书台代码：

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

【问题讨论】：

我有一个类似问题的答案，How to set one component's state from another component in React，希望对您有所帮助！
检查一下，谢谢！

标签： javascript reactjs state react-props

【解决方案1】：

如果我理解正确，你只是想将状态传递给组件的道具，没有别的吗？

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

【讨论】：

是的，理想情况下，我正在尝试拆分书并将其传递给 BookTable，然后在 MainPage 上呈现 BookTable。
上面的代码应该可以工作。虽然我没有测试。告诉我它坏了。
只是为了背负@Kerematam的答案，这只有在传递的道具是状态时才有效。如果你想传递一些不是状态的东西，这不会触发重新渲染。如果您在状态更改时使用 useMemo 或 useCallback，它也将不起作用。更好的方法 imo 是使用上下文或在 <Book> 中有一个 useEffect 以在道具更改时触发重新渲染。

【解决方案2】：

尝试像这样将状态和道具从父组件传递给子组件。

在父组件中，将值传递给子组件。

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

在子组件中，获取上面的props如下。

this.props.stateaData
this.props.propsData

【讨论】：