更改组件中 div 的类名属性

Question

I have a card-publication component and I want to be able to make the component reusable and when declaring the tag I can also declare its classname and the position to place it in.

Component and main code.

import React from 'react';

function CardPublication({name}) {
    return (
        <div id={name}>
            <div id="Card Incard">

            </div>
            <p id="Descripcion"> Paragraph .</p>
        </div>
    );
}

export default CardPublication

and how should I declare them.

<CardPublication ></CardPublication>
<CardPublication ></CardPublication>

Answer 1

You can parsing the props from your declaration components to the component, there is an explain of your case. You must set the arguments on your component first

import React from 'react';

function CardPublication({props}) {
    return (
        <div className={props.name}>
            <div id="Card Incard">

            </div>
            <p id="Descripcion"> Paragraph .</p>
        </div>
    );
}

export default CardPublication

And then you can declaration your component with props and value that you want

<CardPublication name="cards1"></CardPublication>
<CardPublication name="cards2"></CardPublication>

So, the name props will parsing the argument to your component. And you will have two div with "cards1" class and "cards2" class.

You also can learn about components and props on https://reactjs.org/docs/components-and-props.html