如何在 React 中传递属性值
介绍
属性是元素的属性，用于提供对该特定元素处理输出所需的附加数据的访问。HTML 中的每个元素都由多个属性组成，这些属性充当该元素的属性，后跟相应的值。
当您想要改变元素的行为时，需要具有自定义值的属性；因此，在 React 中，您可以使用组件的内置属性或为子组件创建自定义属性。
在本指南中，您将了解如何将静态和动态值传递给属性并为子组件创建自定义属性。
将静态值传递给属性
与 UI 元素关联的任何属性都需要值才能发挥作用。值可以是任何内容，即静态或动态。
如果元素有一个固定值，那么它会调用存储在变量中的静态值，一旦您需要使用该值，它就会直接使用。
例如，假设你的 React 组件中有一个<img>元素，并且 URL 存储在状态变量中，如下所示。
constructor() {
super();
this.state = {
imageUrl: "your_image_url",
};
}
您需要在组件imageUrl3的本地状态中放置一个状态变量，您可以在其中放置图像的适当路径或 URL。
状态变量可以直接与元素一起使用，如下所示。
render() {
console.log(this.props)
return (
<div>
<img src={this.state.imageUrl} />
</div>
);
}
如您所见，this.state.imageUrl是从本地状态访问的；因此，它被称为src属性的动态值，而将imageUrl称为静态值。
同样地，它也可以应用于不同的元素，下面展示几个示例。
render() {
console.log(this.props)
return (
<div>
<a href={this.state.linkUrl} target="_blank">
Hit me to reach Google
</a>
<input type="text" value={this.state.inputValue} />
</div>
);
}
与<a>属性一起，使用的静态值是this.state.linkUrl，并且与<input>控件一起，this.state.inputValue用作属性的静态值。
将动态值传递给属性
到目前为止，在本指南中，您已经了解了如何将静态值传递给属性。但这可能需要您与属性一起使用经常更改的值。
例如，您可能有一个文本输入框，其元素的值会随着您更改其值而更新。下面的示例演示了这一点。
创建一个具有默认值的状态变量。
constructor() {
super();
this.state = {
fullName: "test"
};
}
现在创建<input>元素以及所需的属性。
render() {
return (
<div>
Enter full name :{" "}
<input
type="text"
value={this.state.fullName}
onChange={this.onValueChange}
/>
</div>
);
}
在上面的例子中，改变游戏规则的 props 是onChange()，用于用更新后的值来更新现有值。
onValueChange = event => {
this.setState({ fullName: event.target.value });
};
因此，一旦您更新输入控件中的现有值，它将更新到状态中，并且相同的值将使用 props 出现在输入控件中，如下所示。
value={this.state.fullName}
通过使用和更新不同的状态值，您可以为元素的属性提供动态值。
将值传递给事件属性
当现有页面需要用户交互时，事件非常方便；因此，也可以将值传递给事件属性，就像元素的内置属性一样，例如src、href、value、height、width等。
您可以在任何地方定义值，例如组件中的本地状态，以将值传递给事件属性。见下文。
constructor() {
super();
this.state = {
student: {
name: "heyfoo",
age: "18"
}
};
}
在组件的状态对象内部，student是与键值对一起创建的自定义对象。
下一步是实现事件属性，例如onClick()。
render() {
return (
<div>
<span onClick={() => this.setObjectValue(this.state.student)}>
Send object
</span>
</div>
);
}
在<div>内部，创建了一个元素<span>，以及名为onClick 的事件属性，当用户点击 span 元素时会触发事件。
一旦用户点击该元素，您可以将任何自定义值作为函数参数传递。
onClick={() => this.setObjectValue(this.state.student)}
this.setObjectValue是一个接受一个参数的自定义函数，给出的静态参数是this.state.student。
要从事件函数访问对象，请参见下文。
setObjectValue(obj) {
console.log(obj);
}
您可以将任何静态或动态值与事件函数一起传递，就像上面的示例一样。
结论
当使用具有静态或动态值的 HTML 元素来实现交互结果时，属性起着至关重要的作用。
我希望本指南能帮助您实现为属性提供价值的各种方法。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~