时间戳

首页 > 解决方案 > 如何在 Reactjs 上调用可重用组件时更改属性的值？

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

问题描述

我有一个带有表单的模式，我正在尝试渲染一个可以在任何地方使用不同输出的组件。

例如：

这是组件：

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

)

所以，唯一会从 call 到 other 的变化是，与其说addresses.originationAddress.description它必须说addresses.destinationAddress.description

唯一改变的词是originationAddressto 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。

我怎样才能做到这一点？

标签： javascriptreactjsecmascript-6

解决方案

使用模板字符串

   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']在这里您可以将其替换为您的值变量

推荐阅读