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

Question

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

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

所以在这里我将整个组件传递给另一个组件，问题在于 ContentSkuInfo 组件正在映射抛出状态，所以所有数据都加载在同一个地方，我需要加载数据，但每个 DIV 中的数据。

我需要这个：

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

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

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

但我有这个：

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

这是我的组件Seccion_uno_contenido.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;

调用DataStorage.js

import React from 'react';
import axios from 'axios';

var productsIds = ['3552357', '2635968BC', '3181464', '3593754'];
var productsIdsJoin = productsIds.join('-');

const getProductDetailAPI = (productsIds, storeId) => ({
    method: 'GET',
    baseURL:`SORRY CAN'T SHOW THIS`,
    auth: {
        username: 'XXXXXXX',
        password: 'XXXXXXX',
    },
    headers: {
        'Content-Type': 'application/json',
    },
    data: {},
});

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

class DataStorage extends React.Component {

    constructor(props) {
        super(props);
        this.state = { products: [] };
    };

    getWebServiceResponse = (currentList, storeId) => (
        axios(getProductDetailAPI(currentList, storeId))
            .then(response => response.data)
            .then(newData => {
                this.setState({ products: newData.productDetailsJson })
            })
            .catch(e => e)
    );

    componentDidMount() {
        this.getWebServiceResponse(productsIdsJoin, 96);
    };

    render() {
        return (
            <samp>
                {this.state.products.map(skuData =>
                    <ContentSkuInfo
                        prodsName={skuData.name}
                        prodsId={skuData.productId}
                        prodsStatus={skuData.status}
                        prodsPublished={skuData.published}
                        prodsNormal={skuData.NORMAL}
                        prodsCMR={skuData.CMR}
                        prodsAhorro={skuData.savings}
                        prodsCombo={skuData.combo}
                        prodsStock={skuData.stockLevel}
                    />
                )
                }
            </samp>
        )
    }
}

export default DataStorage;

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>
          )}