如何将 JSON 值传递给 React 组件
介绍
当你开始使用 React 时，你可能会遇到许多使用共享数据的组件的 React 应用示例。这些组件在复杂性方面非常简单，并且非常容易理解。但是，当你在生产级应用上工作时，你会注意到数据来自许多不同的来源和服务。
至关重要的是，您构建的组件必须是可扩展、可维护的，并且不会对应用程序造成任何瓶颈。在本指南中，您将学习如何将 JSON 数据传递给组件。
使用 Props 传递值
React 组件可以通过 props 访问来自其他组件的数据。Props 用于将数据从一个组件发送到另一个组件。
在下面的例子中，Hello组件接受一个name属性。
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<Hello name="John" />
</div>
);
}
}
const Hello = (props) => <h1>Hello {props.name}</h1>;
类似地，JSON 值可以在 props 内部传递。
请考虑以下示例。此处，用户在App组件的状态中设置，并作为用户prop 传递给Account组件。Account组件可以使用props.user访问该值。
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
user: {
id: 12,
firstName: "John",
lastName: "Doe",
},
};
}
render() {
return (
<div>
<Account user={this.state.user} />
</div>
);
}
}
const Account = (props) => {
const { user } = props; // same as -> const user = props.user;
return (
<div>
<span>
Name - {user.firstName} {user.lastName}
</span>
<span>ID - {user.id}</span>
</div>
);
};
通常，JSON 数据来自外部源，例如 API 或 JSON 文件，但为了简单起见，这里是从状态中添加的。无论 JSON 对象有多复杂或多大，仍然可以使用 props 传递。React 对 props 的大小没有任何限制。
使用事件传递值
在上一指南中，您了解了如何使用事件总线在不共享任何共同功能或特性的独立组件之间传递数据。同样，您可以使用事件总线传递 JSON 数据。
下面您可以找到事件总线的代码，在之前的指南中对此进行了更详细的解释。总结一下，on方法将事件附加到 document 对象，dispatch方法可以触发事件以及一些数据，remove方法可以取消附加事件以防止内存泄漏。
const eventBus = {
on(event, callback) {
document.addEventListener(event, (e) => callback(e.detail));
},
dispatch(event, data) {
document.dispatchEvent(new CustomEvent(event, { detail: data }));
},
remove(event, callback) {
document.removeEventListener(event, callback);
},
};
export default eventBus;
现在，使用事件总线，在componentDidMount()生命周期方法中从状态中调度userData事件以及用户数据。在Account组件中，监听userData事件，并在触发事件时在状态中设置用户数据。
在这里你会注意到，与前面的示例不同，你不必将用户数据作为 prop 传递给Account组件。
import React, { Component } from "react";
import eventBus from "./eventBus";
class App extends Component {
constructor(props) {
super(props);
this.state = {
user: {
id: 12,
firstName: "John",
lastName: "Doe",
},
};
}
componentDidMount() {
eventBus.dispatch("userData", this.state.user);
}
render() {
return (
<div>
<Account />
</div>
);
}
}
class Account extends Component {
constructor(props) {
super(props);
this.state = {
user: {},
};
}
componentDidMount() {
eventBus.on("userData", (user) => {
this.setState({ user });
});
}
render() {
const { user } = this.state; // same as -> const user = props.user;
return (
<div>
<span>
Name - {user.firstName} {user.lastName}
</span>
<span>ID - {user.id}</span>
</div>
);
}
}
结论
总而言之，您可以使用 props 或事件总线将 JSON 数据传递给其他组件；选择哪种方法取决于您应用程序的要求。但是，建议您使用 props，以便 React 可以跟踪组件之间的数据和通信。在某些情况下使用事件总线可能会导致意外结果。因此，只有在独立组件之间交互的情况下才必须使用事件总线。本指南就是这些；下次见，注意安全并继续编码。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~