Question

我在学习React时，我陷入了混乱。编写功能组件时，我在各处使用道具。

我总是使用props.profile，它可以正常工作。但是在一个代码组件中，我不得不写 const profiles=props;，效果很好。

我尝试使用const profiles=props.profile；并且我还尝试在“卡片”功能组件的return内部使用

{props.profile.avatar_url}，但都失败了

下面是我的代码，效果很好

const Card=(props)=>{
  const profiles=props; //This I dont understand
  return(
    <div>
      <div>
        <img src={profiles.avatar_url} width="75px" alt="profile pic"/>
      </div>
      <div>
        <div>{profiles.name}</div>
        <div>{profiles.company}</div>
      </div>
    </div>
  );
}

const CardList=(props)=>{
  return(
    <div>
      {testDataArr.map(profile=><Card {...profile}/>)}
    </div>
  );
}

有人可以帮我理解为什么我不能使用const profiles=props.profile吗？

还有什么其他方法可以达到正确的结果？

Answer 1

您的testDataArr可能是这个

testDataArr = [{avatar_url:"",name:"",company:""},{avatar_url:"",name:"",company:""},{avatar_url:"",name:"",company:""}]

现在，当您这样做时，

{testDataArr.map(profile=><Card {...profile}/>)}

此处profile = {avatar_url:"",name:"",company:""}，

当您这样做时，

<Card {...profile}/>

等同于

<Card avatar_url="" name="" company=""/>

在子组件中，当您这样做时，

const profiles=props;

此处props = {avatar_url:"",name:"",company:""}

因此您可以访问其值，

props.avatar_url

props.name

props.company

但是当您这样做时，

const profiles=props.profile

profile键在{avatar_url:"",name:"",company:""}对象中不存在，并且失败。

Answer 2

好。这是问题所在，props对象不包含配置文件属性，但它是配置文件属性。因为在渲染Card元素时（在CardList中），您正在传播profile变量，所以您基本上是在写：

<Card avatarUrl={profile.avatarUrl} comapny={profile.comany} />

相反，您应该这样做

<Card profile={profile} />

然后在Card组件中以这种方式访问数据

const Card = (props) => {
  const profile = props.profile
}

或更简单

const Card = ({profile}) => {
  return <div>{profile.comany}</div>
}

为什么只在props中使用props？

2 个答案: