Question

如何将多个道具传递给一个组件？

例如，我要渲染一个具有各种元素但并非所有元素都在同一组件中的DIV。

因此，在这里，我将整个组件传递到另一个组件中，问题是ContentSkuInfo组件正在映射抛出状态，因此所有数据都在同一位置加载，我需要加载de数据，但每个DIV中都需要加载

我需要这个：

SearchAsync

但是我有这个：

<div>
<strong>Data 01</strong>
</div>

<div>
<strong>Data 02</strong>
</div>

<div>
<strong>Data 03</strong>
</div>

这是我的组件 Seccion_uno_contenido.js

<div>
<strong>Data 01</strong>
<strong>Data 02</strong>
<strong>Data 03</strong>
</div>

CallDataStorage.js

import React from 'react';
import ContentSkuInfo from './CallDataStorage';

const ContenidoUno = (props) => {
  return (
    <div className="contentBox outerBox-first" >
      <a href={props.link}>
        <img src={props.imagen} alt="bloque 01" className="img-wrap" />
      </a>
      <h3>{props.categoria}</h3>
      <img src={props.icono} className="iconic" alt="producto" />
      <span>{props.descripcion}</span>
      <ContentSkuInfo />
      <small>Antes: ${props.antes}</small>
      <div className="containerBotonRow">
        <a href={props.link}><button className="botonRow">¡Lo quiero!</button></a>
      </div>
    </div>
  );
}

export default ContenidoUno;

Answer 1

只需将CallDataStorage.js中ContentSkuInfo的定义更改为

const ContentSkuInfo = (props) => (
  <div>
    <strong>$ {props.prodsNormal}</strong>
  </div>
)

Answer 2

您没有在代码中将任何道具传递给ContentSkuInfo组件。要通过ContentSkuInfo中的道具访问内容，您需要将一些属性传递给ContentSkuInfo。

例如

在ContenidoUno组件中调用ContentSkuInfo时，您需要发送如下内容

     <ContentSkuInfo prodsNormal=“testing”  prodsNormal2=“test2”/>

在ContentSkuInfo组件中，您可以像从表达式中删除$一样得到它

没有回报

     const ContentSkuInfo = (props) => (
         <div>
             <div>
                  <strong>{props.prodsNormal}</strong>
             </div>
             <div>
                  <strong>{props.prodsNormal2}</strong>
             </div>
          </div>
      )

有回报

      const ContentSkuInfo = (props) => {
         return (
               <div>
             <div>
                  <strong>{props.prodsNormal}</strong>
             </div>
             <div>
                  <strong>{props.prodsNormal2}</strong>
             </div>
          </div>
          )}

将多个道具传递给一个组件

2 个答案: