reactjs 如何从对象中获取特定元素以将其用作组件的道具

bt1cpqcv 于 2022-11-22 发布在 React

关注(0)|答案(3)|浏览(141)

具有接受某些道具的组件的：

<MyComponent first="first" second="second" third="third" />

我们可以创建一个对象：

const mockData = {
  first: 'test1',
  second: 'test2',
  third: 'test3'
};

并以下列方式将其用作道具：<MyComponent {...mockData} />而且它工作得很好。
我想要的是只使用mockData对象中的前两个元素，因为它们都不是必需的/强制的，这应该不是问题。
所以我试过这样：<MyComponent {...mockData.first, ...mockData.second} />，但它不工作。
当然，它可以写成<MyComponent first={mockData.first} second={mockData.second} />，但这只是一个例子，元素很少，因为我的真实的问题有更多的元素。
有没有办法做到这一点？

reactjs

来源：https://stackoverflow.com/questions/74521431/how-to-get-specific-elements-from-an-object-to-use-them-as-props-for-a-component

3条答案

按热度按时间

qltillow1#

您必须创建一个派生自模拟数据的类型，如下所示：

type MyComponentType = Pick<mockdata, "first">

赞(0）回复(0）举报 2022-11-22

u3r8eeie2#

您可以使用对象扩散语法：

const {third, ...rest} = mockData;

// now the variable rest has all the properties from mockData except third

<MyComponent {...rest}/>

既然你说你有更多的属性，你可以提取尽可能多的属性，你想通过简单地包括他们之前的解构，例如：

const {third, fourth, fifth, /* etc */ ...rest} = mockData;

赞(0）回复(0）举报 2022-11-22

bjp0bcyl3#

const mockData = {
    first: 'test1',
    second: 'test2',
    third: 'test3'
  };

<MyComponent props={ mockData } />

const MyComponent = ({first, second, third}) => {
  return (
  <div>
    first = {first}
    second = {second}
    third = {third}
  </div>
)};

这应该对你有用

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 如何从对象中获取特定元素以将其用作组件的道具

3条答案

相关问题

热门标签

最新问答