Question

我实际使用的方式效果很好，但我的道具却不断增长，我想知道是否可以将它们分组为一个状态并将其传递给孩子，这是我的代码：

    <Panel
      uniqueIDs={uniqueIDs}
      userID={userID}
      loading={loading}
      premium={premium}
      percent={percent}
      total={total}
      until={until}
      user={user}
      done={done}
    />

在渲染之后，我像这样定义那些变量：

let {正在加载，为空，总计，唯一ID，分片，百分比，直到确定，用户，高级用户，数据，密钥，已完成，用户ID} = this.state;

我可以只发送this.state变量吗？我做了一些研究，但没有找到解决问题的任何方法，我知道我可以使用第三方库来管理状态，但是我试图使其保持简单。

Answer 1

您可以为要发送的道具制作对象，并可以使用传播算子

  let props = {
        uniqueIDs : uniqueIDs,
        userID:userID,
        loading:loading,
        premium:premium
          }
<Panel {...props} />

在面板组件中，您可以使用this.props.uniqueIDs等等。

Answer 2

是的，您绝对可以将整个状态变量作为多个属性传递到子组件中

<Child {...this.state}/>

这完全可以接受。

如果您的状态为{id: 1, name: 2}

您仍然可以通过以下方式访问子组件中的道具

props.id or this.props.id
props.name or this.props.name

请注意，您应该了解组件重新渲染。如果您对父组件中的状态进行了许多更新，这也将导致子组件也重新渲染很多，这可能会导致性能问题。

要解决此问题，请确保对类组件采用componentDidUpdate()之类的方法，对于功能组件采用react-hooks之类的方法。这些可以帮助控制重新渲染的流程。

有没有办法让一组道具反应呢？

2 个答案: