我如何呈现一个组件，但有多个内容

Question

我有一个卡片组件生成器，它从const数组中获取信息，并在卡片UI组件内的表格中呈现带有数据的div。我需要实现每个卡内的ADD按钮，这样我就可以打开一些输入模态。但是，由于模态在函数内，不同卡片上的每个模态都呈现相同我怎样才能让每个模态都能抓取到被渲染的卡片所特有的东西呢?

下面是代码

function ProntCard() { const [modal, setModal] = useState(false);
const columns = [
{
title: "Estado de Saúde",
dataIndex: "1",
key: "name",
width: 150,
},
{
title: "Diagnostico",
dataIndex: "2",
key: "age",
width: 150,
},
{
title: "Medicação",
dataIndex: "3",
key: "address 1",
ellipsis: true,
},
{
title: "Data de atendimento",
dataIndex: "4",
key: "address 2",
ellipsis: true,
},
{
title: "Nota",
dataIndex: "",
key: "address 3",
ellipsis: true,
},

];
const nomes = [
{
nome: "Condições de Saúde / Comorbidades",
colunas: [
{
title: "Estado de Saúde",
dataIndex: "name",
key: "name",
width: 150,
},
{
title: "Sintomas",
dataIndex: "age",
key: "age",
width: 150,
},
{
title: "Diagnóstico",
dataIndex: "date",
key: "address 1",
ellipsis: true,
},
{
title: "Data de atendimento",
dataIndex: "address",
key: "address 2",
ellipsis: true,
},
{
title: "Nota",
dataIndex: "tags",
key: "address 3",
ellipsis: true,
},
],
laudos: [
{
key: "1",
name: "Atípico",
age: "Leve dor de cabeça",
date: "Dipirona de 1g",
address: "02/01/2021",
tags: "Noite de Sono mal dormida",
},
{
key: "2",
name: "Convencional",
age: "Leve dor membros",
date: "Insulina de 1g",
address: "02/01/2021",
tags: "Mal estar",
},
],
},
function showModal() {
setModal(!modal);
}
function CardsHost(props) {
const cards = nomes.map((nome) => (
<div>
<div className="box2">
<div className="box2header">
<div>
<h3>{nome.nome}</h3>
</div>
<div className="addSpan">
<PlusCircleOutlined />
<span onClick={showModal}> Adicionar</span>
</div>
</div>
<div className="box2info">
<Table columns={nome.colunas} dataSource={nome.laudos} />
</div>
</div>
</div>
));
return <div className="controler">{cards}</div>;
}
return (
<>
<div className="">
<CardsHost posts={nomes} />

</div>
<Modal
visible={modal}
onOk={showModal}
title="Novo Prontuário"
onCancel={showModal}
width={1000}

>

{columns.map((column) => (



<div key={column.key} className="labelll">
<label>{column.title}</label>
<Input style={{ width: "61.3%" }} />
</div>

))}
</Modal>
</>
);
}
export default ProntCard;

Answer 1

如果您真正想要的是根据您选择的Card传递特定的数据给模态，请更改此部分。

<span onClick={showModal}> Adicionar</span>

。

<span onClick={() => {showModal(nome)}}> Adicionar</span>

自定义showModal功能，将必要数据设置为state。

Answer 2

如果我正确理解了这个问题，您可以为每个不同的卡呈现不同的jsx:

const cards = nomes.map((name, index) => (
<UniqueCard key={index} name={name} />
));

UniquCard.jsx:

export const UniqueCard = ({key, name}) => {
const renderCard = () => {
switch(name){
case 'name1':
return <p style={{color: 'red'}}> Card name: {name} </p>
case 'name2':
return <p style={{color: 'yellow'}}> Card name: {name} </p>
case 'name3':
return <p style={{color: 'green'}}> Card name: {name} </p>
default:
return <p> No card </p>
}
}
return (
<> {renderCard()} </>
)
}

Answer 3

使用map-loop的索引:

function showModal(index) {
// use the index here to find element in array
}
const cards = nomes.map((nome, index) => (
<span onClick={() => showModal(index)}> Adicionar</span>
))

你可以把这个索引赋给任何你想以后使用它来唯一标识每个模态的属性。