时间戳

首页 > 解决方案 > 传递道具（Vue / React）的正确方法是什么？分别传递对象或每个道具？

reactjs - 传递道具（Vue / React）的正确方法是什么？分别传递对象或每个道具？

问题描述

我有以下情况，描述如下。什么会更正确？

在具有每个单独属性的变体中 - 我们似乎获胜，因为我们切断了从子组件更改道具的随机可能性，您可以安全地验证所有内容。

在第二种情况下，一切似乎都结构更整齐，但您需要为它编写额外的验证，并且有可能不小心从子组件中修改它。

// 1

  <SolocatorHeader 
    titleText="Project Summary"
    titleColor="#FFDBCD"
    titleImg="/test.png"
    descText="Some text"
    descColor="#FFFFFF"
  />

// 2

  <SolocatorHeader
    :title="{
      text: 'Project Summary',
      color: 'FFDBCD',
      img: '/test.png'
    }"
    :desc="{
      text: 'Some text',
      color: '#FFFFFF'
    }"
  />

标签： reactjsvue.js

解决方案

为了尽量减少重新渲染，最好单独发送道具，这取决于其中一些道具是否会更频繁地更新。

如果你想分别给它们传递 props 但又不想单独写 props，你可以使用扩展符号：

<SolocatorHeader {..title} {...desc} />

推荐阅读