如何在Reactjs上调用可重用组件时更改属性的值？

Question

我有一个表单的模式，在这个表单中，我试图呈现一个组件，该组件可以在任何具有不同输出的地方使用。

例如：

这是构成部分：

import { Select, SelectItem } from 'carbon-components-react';
import React from 'react';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import { uniqBy } from 'lodash';
import GetShipmentsAddresses from './containers/GetShipmentsAddresses';

const AddressesSelect = ({ t, handleAddresses, value }) => (
  <GetShipmentsAddresses>
    {({ data }) => {
      const unique = uniqBy(data, 'originationAddress.description');
      const renderAddresses = unique.map(addresses => (
        <SelectItem
          value={addresses.originationAddress.description}
          key={addresses.id}
          text={addresses.originationAddress.description}
        />
      ));
      return (
        <Select
          id="select-3"
          defaultValue="Shipped From"
          labelText={t('shipments.shippedFrom')}
          onChange={handleAddresses}
        >
          <SelectItem
            disabled
            hidden
            value=""
            text={t('shipments.selectLocation')}
          />
          <SelectItem value="" text={t('shipments.allLocations')} />
          {renderAddresses}
        </Select>
      );
    }}
  </GetShipmentsAddresses>
);

AddressesSelect.propTypes = {
  t: PropTypes.func.isRequired,
  handleAddresses: PropTypes.func.isRequired,
};

export default translate()(AddressesSelect);

我需要在这样的父组件上调用它：

const ParentComp = ({ VALUE }) => (

          <AddressesSelect
            handleAddresses={this.handleChange('shippedFrom')}
            VALUE="originationAddress" // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />

          <br />

          <AddressesSelect
            handleAddresses={this.handleChange('shippedTo')}
            VALUE="destinationAddress" // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />

)

所以，唯一要改变的是从调用到另一个，不是说addresses.originationAddress.description，而是addresses.destinationAddress.description

唯一的改变是originationAddress到destinationAddress。

所以假设我想做这样的事情：

const AddressesSelect = ({ t, handleAddresses, VALUE }) => (
  <GetShipmentsAddresses>
    {({ data }) => {
      const unique = uniqBy(data, 'VALUE.description');
      const renderAddresses = unique.map(addresses => (
        <SelectItem
          value={addresses.VALUE.description}
          key={addresses.id}
          text={addresses.VALUE.description}
        />
      ));
      return (
        <Select
          id="select-3"
          defaultValue="Shipped From"
          labelText={t('shipments.shippedFrom')}
          onChange={handleAddresses}
        >
          <SelectItem
            disabled
            hidden
            value=""
            text={t('shipments.selectLocation')}
          />
          <SelectItem value="" text={t('shipments.allLocations')} />
          {renderAddresses}
        </Select>
      );
    }}
  </GetShipmentsAddresses>
);

其中VALUE可以更改组件对destinationAddress或originationAddress的调用。

我怎样才能做到这一点？

Answer 1

使用模板字符串

   const ParentComp = ({ value }) => (
          <AddressesSelect
            handleAddresses={this.handleChange('shippedFrom')}
            VALUE={`${value}Address`} // this is would be VALUE
            title={t('shipments.shippedFrom')}
          />)

在您的组件中，使用它作为

        <SelectItem
          value={addresses[value].description}
          key={addresses.id}
          text={addresses[value].description}
        />

就像点表示法一样，您可以使用address'originatingAddress'，这里可以用值变量替换它。