如何在反应应用程序中使用不同的数据在网页中显示相同的UI（功能）组件

Question

我在单独的组件中创建了一个动画 ui，我必须发送 css（动画时间）、jsx 的数据，并且我必须在我的父组件中使用该组件两次。我怎样才能实现这一点？

我尝试将数据作为道具发送，但我显示了相同的数据。我如何用同样的方法实现这一点 组件，我不知道如何发送动画数据，动画代码如下

const Education = () => {

  const circleprops = {
    collegepercents :'65',
    hscpercent:'80'
    
  }

  return (
    <><div>
      <Circlebar circleprops={circleprops.collegepercents}/>
      <div>
        <h1>Veltech Engineering college</h1>
        <h2>Bachelor of Engineering - Mechanical Engineering</h2>
        <h3>CGPA - 6.5</h3>
      </div>
      {<Circlebar circleprops={circleprops}/> }
      </div>
    </>
  )
}


css:

@keyframes animate {
    
    100%{
      stroke-dashoffset:300;
    }
  }

Answer 1

要在 React 中创建可重用组件，请按照以下步骤操作：

创建可重用组件 ：在下面的示例中，我使用

title

和

desc

创建了非常简单的卡片。我们将使用

prop

显示卡片中的数据，因此标题将为

{props.title}

，描述将为

{props.desc}

。这就是第一步的全部内容。

import './index.css';

function SimpleCard(props) {
  return (
    <>
      <div className="mainClass">
        <h2 className="titleText">{props.title}</h2>
        <p className="descText">{props.desc}</p>
      </div>
    </>
  );
}

export default SimpleCard;

现在我们要在我们想要使用它的地方导入这个组件：我只是将它导入到

App.jsx

。

import { useState } from 'react';
import './App.css';
import SimpleCard from './SimpleCard.jsx';

function App() {
  return (
    <>
      <SimpleCard/>
    </>
  );
}

export default App;

现在，在最后一步中，我们将从 App.jsx

 更改卡片组件内的 

title

 和 

desc ：为此，我们只需在

title="First Card"

 中添加 

desc="This is our first card"

 和 

<SimpleCard/>

import { useState } from 'react';
import './App.css';
import SimpleCard from './SimpleCard.jsx';

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <SimpleCard title="First Card" desc="This is our first card" />
    </>
  );
}

export default App;

这就是如何创建可重用组件，并根据需要使用 React js 中的

props

更改其数据。