Javascript 使用时覆盖react组件

我想知道当我需要做一个微小的改变而不是创建一个全新的组件时，我是否可以改变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

const ReactComp=（）=>{
返回(
你好
嗨，我是一个组件
我是一个段落

}
导出默认反应组件

第1页

import ReactComp from "../ReactComp.js


<  ReactComp />

从导入ReactComp.。/ReactComp.js

第2页

import ReactComp from "../ReactComp.js


<  ReactComp />

从导入ReactComp.。/ReactComp.js

在第1页中，我对呈现的所有组件都感到满意，但在第2页中，我不希望出现段落

“我是一个段落”

。我知道有一种简单的方法可以做到这一点，即声明

props.text

，然后在“第1页”中的ReactComp中声明文本，并在“第2页”中保留空白的props但这只是一个例子。在实际代码中，我不想在“page2”中显示的段落是一个复杂的函数，在ReactComp.js页面中声明了许多变量

---

我希望这足够清楚（我知道有点混乱）但是我要寻找的是一种神奇的方式，在另一个页面中呈现ReactComp，而无需段落。这是一种在另一个页面中使用react组件时对其进行细微更改的简单方式。

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

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

下面的方法将使用props和ES6语法的解构以及基于空检查（或布尔值）的条件呈现

空检查：

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=（{段落}）=>{
返回(
你好
嗨，我是一个组件
{第&&(
{段落}
）}
}
导出默认反应组件
---------（使用此组件时）
//将显示带有“某些文本”的段落
//不会显示段落

布尔属性：

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

const ReactComp=（{show段落}）=>{
返回(
你好
嗨，我是一个组件
{显示段落&&(
我是一段
）}
}
导出默认反应组件
---------（使用此组件时）
//将显示段落（也可以使用showParagation={true}）
//不会显示段落

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

---

请在提问之前，将问题以漂亮的格式写下来，并检查预览。您必须格式化代码。我尝试格式化代码，但仍需要清晰。您希望从

第2页

呈现的段落看起来如何？请注意！boolen正是我需要的！