Question

我正在阅读React文档，关于组件和道具here。有一件事让我困惑。在这部分代码中，我们将道具传递给Avatar Component：

Capabilities

注释对象的位置如下：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

由于我们之前只传递了对象的const comment = { date: new Date(), text: 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', avatarUrl: 'http://placekitten.com/g/64/64', }, };属性，为什么我们需要在author组件中访问author.name和avatarUrl这样的内容：

Avatar

而且，不是这样，在function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); }，我来自哪里会更有意义：

Vue.js

Answer 1

当您将道具传递给组件时，您只需通过属性名称访问它们，父项将值传递给，因为您可以传递多个道具，这是必需的。

为了能够访问最后一个片段中的道具，您可以使用对象传播：

<Avatar {...props.author} />

同样：

<Avatar avatarUrl={props.author.avatarUrl} name={props.author.name}/>

Answer 2

我理解为什么你感到困惑。请注意，每个组件（父组件或子组件）彼此具有不同的props对象。这些完全不相关，可能有不同的属性集。

因此，通过将值作为道具传递给子组件，您不会重新定义该子项的道具对象（例如，作者），相反，您几乎就像追加它的新值，最初是空的。

例如，

// Parent props is: { author, posts }
const Parent = (props) => {
  return (
    /* Child props is a completely different -> object, 
    ** now that nothing is being passed, an empty object -> {} 
    */
    <Child />
  );
};

现在，如果父开始将新道具传递给Child，则子道具现在将新值保存在其自己的道具对象中：

// Parent props is: { author, posts }
const Parent = (props) => {
  return (
    /* Child props is a completely different object, 
    ** now Child.props { author: Parent.props.author, age: "12" } */
    <Child author={props.author} age="12" />
  );
};

实质上，每个组件都会接收一个不同的唯一道具对象，该对象在组件生命的初始阶段设置。

此外，我建议您使用对象解构ES6功能来节省打字时间＆＃39; props.author＆＃39;：

const Child = ({ author, age, smoker }) => {
   return <h2>Hey ${author.name}</h2>
};

由于props是传递给子组件函数的第一个参数，通过将其设置为签名中的对象，我们能够提取所需的特定值。

如果我们在render方法中，但在返回React元素之前，我们会在类组件上查看它。我们正在初始化const并分配this.props，以便对对象进行解构并创建本地标识符。

class MyComponent extends React.Component {
   render() {
     const { author, age, smoker } = this.props;

     return (
       <h2>Hey {author.name}</h2>
     );
   }
}

如果您希望了解有关组件，道具，州和一般生命周期的更多信息，请查看资源this。

Answer 3

您正在以用户道具传递：

{
  name: 'Hello Kitty',
  avatarUrl: 'http://placekitten.com/g/64/64',
}

在儿童中它将是：

props: {
  user: {
   name: 'Hello Kitty',
   avatarUrl: 'http://placekitten.com/g/64/64',
  }
}

要访问它：

props.user.avatarUrl
props.user.name

请记住，props是一个对象，您基本上取author的值，将其设置为user并将其附加到props。

将属性传递给子级

3 个答案: