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 "段。我知道有一个简单的方法可以做到，即声明props.text，然后在“页面1”中的ReactComp中声明文本，在“页面2”中将props保留为空白。但这只是一个例子。在实际代码中，我不想在“ page2”中显示的段落是一个复杂的函数，在ReactComp.js页面中声明了很多变量。

我希望这已经足够清楚了（我知道有点混乱），但是我正在寻找的是一种神奇的方式来在没有该段落的另一页中呈现ReactComp。在另一个页面中使用它时，一种对React组件进行小的更改的简单方法。

Answer 1

就通过组件传递道具而言，您可以做几件事：

以下方法将使用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 = ({ 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

您必须通过自定义将props传递给组件以渲染组件

使用时覆盖react组件

2 个答案: