使用时覆盖反应组件

Question

当我需要做一个微小的更改而不是创建一个全新的组件时，我想知道是否可以更改React的组件。

假设我已经声明了这样一个组件：

const ReactComp = ()=> {
return (
<div>
<h1>Hello</h1>
<h3>Hi, I am a component</h3>
<p>I am a paragraph</p>
</div>
}
export default ReactComp

第1页

import ReactComp from "../ReactComp.js

<  ReactComp />

第2页

import ReactComp from "../ReactComp.js

<  ReactComp />

在第1页中，我对所有组件的呈现都很满意，但在第2页中，不希望出现" I am a paragraph "段。我知道有一种简单的方法可以做到这一点，即声明CCD_；第1页"；并将道具留空；第2页"；。但这只是一个例子。在真正的代码中，我不想在"；第2页"；是一个复杂的函数，在ReactComp.js页面中声明了许多变量。

我希望这足够清楚(我知道这有点令人困惑(，但我正在寻找一种神奇的方式，在另一个没有段落的页面中呈现ReactComp。在其他页面中使用react组件时，对其进行小更改的一种简单方法。

Answer 1

在传递组件的道具方面，您可以做一些事情：

以下方法将使用props和ES6语法的析构函数，以及基于null检查(或布尔值(的条件呈现。

空检查：

const ReactComp = ({ paragraph }) => {
return (
<div>
<h1>Hello</h1>
<h3>Hi, I am a component</h3>
{paragraph && (
<p>{paragraph}</p>)}
</div>
}
export default ReactComp
--------- (Where this component is used)
<ReactComp paragraph='some text' /> // will show paragraph with 'some text'
<ReactComp /> // will not show paragraph

布尔道具：

const ReactComp = ({ showParagraph }) => {
return (
<div>
<h1>Hello</h1>
<h3>Hi, I am a component</h3>
{showParagraph && (
<p>I am a paragraph</p>)}
</div>
}
export default ReactComp
--------- (Where this component is used)
<ReactComp showParagraph /> // will show paragraph (can also use showParagraph={true})
<ReactComp showParagraph={false} /> // will not show paragraph

关于上述主题的一些教育资源：

• 关于销毁的媒体文章
• 关于空检查的中型文章

Answer 2

您必须将道具传递给您的组件，以便使用自定义渲染组件