响应道具:传递组件所需的所有对象或属性？
响应道具:传递组件所需的所有对象或属性？
提问于 2022-10-22 05:54:07
我有一个仅需要一些值的React组件，但无论这些对象的属性是否在组件中使用，我都一直将对象传递给组件。
下面是代码示例，我的意思是将Post对象传递给Title组件，这意味着我也传递了comments，尽管Title组件并不需要它。
type Post = {
title: string;
comments: Comment[];
};
function Title({ post }: { post: Post }) {
return <h1>{post.title}</h1>;
}
function Post(post: Post) {
return (
<div>
{/* here: */}
<Title post={post} />
{/* .... */}
</div>
);
}在这里，我将标题传递给Title组件。
type Post = {
title: string;
comments: Comment[];
};
function Title({ title }: { title: string}) {
return <h1>{title}</h1>;
}
function Post(post: Post) {
return (
<div>
{/* here: */}
<Title title={post.title} />
{/* .... */}
</div>
);
}我想问的是我应该用哪一个更好？
回答 2
Stack Overflow用户
发布于 2022-10-22 06:25:17
这通常取决于个人喜好，因为结果是一样的。我更喜欢你选择的第二条路线，因为它更具体。还可以使用对象析构从对象中提取标题。
type Post = {
title: string;
comments: Comment[];
};
function Title({ post }: { post: Post }) {
const {title} = post
return <h1>{title}</h1>;
}
function Post(post: Post) {
return (
<div>
{/* here: */}
<Title post={post} />
{/* .... */}
</div>
);
}Stack Overflow用户
发布于 2022-10-25 05:33:19
第二个选择是更好的选择。有了第一种选择，你就可以将不同的事物组合在一起，相互依赖。后接口不需要对标题组件做任何事情。通过组合这些，您将降低代码的可维护性。如果Post -the接口将更改，您可能最终会中断标题-component。
React -component道具应该被视为任何API。您应该始终强调松散耦合，在这种情况下，始终将依赖关系保持在最低限度。
在你的例子中，还有第三种选择。您可以让标题组件使用子-props，并在使用HTML -title -component时给出标题内容：
<Title>My title text</Title>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74161399
复制相关文章
相似问题
腾讯云开发者
