如何在 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'] ，在这里你可以用你的值变量替换它