Question

如何强制向组件添加道具（不使用component标签？）

当我尝试这样做时：

var imgcol_all = ee.ImageCollection('NASA/GPM_L3/IMERG_V05');

function add_date(img){
    var date  = ee.Date(img.get('system:time_start'));
    var date_daily = date.format('YYYY-MM-dd');
    return img.set('date_daily', date_daily);
}

var startdate = ee.Date.fromYMD(2014,3,1);
var enddate   = ee.Date.fromYMD(2014,4,1);
var imgcol = imgcol_all
    .filter(ee.Filter.date(startdate,enddate)).select('precipitationCal')
    .map(add_date);
// imgcol = pkg_trend.imgcol_addSeasonProb(imgcol); 
print(imgcol.limit(3), imgcol.size());

var pkg_trend = require('users/kongdd/public:Math/pkg_trend.js');
var imgcol_daily = pkg_trend.aggregate_prop(imgcol, "date_daily", 'sum');
print(imgcol_daily);

Map.addLayer(imgcol_daily, {}, 'precp daily');

我收到以下错误消息。

TypeError：无法分配为仅读取对象“＃”的属性“ onChange”

这里有更多我的上下文代码。

FormTemplate.js

component.props.onChange = onChange;

AppConfig.js

const getComponent = ( onChange, component, ) => {
  component.props.onChange = onChange; // this line throws the error
  return component;
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map( ({ component, ...rest, }) =>
          ( component && (rest.type === 'component') )
          ?
          getComponent(onChange, component,)
          :
          getTextField(onChange, rest,)
        )
      }
    </div>
  );
}

Answer 1

就像错误说的那样，您不能变异直接获得的道具。更新组件属性的唯一方法是克隆元素并向克隆的元素添加/更新属性。

const getComponent = ( onChange, component, ) =>
  React.cloneElement(component, { onChange })

Answer 2

还有另一种方法可以将代码保留在组件的上下文中（而不是创建getComponent帮助函数，从而增加了一些间接性），对于使用此方法的其他开发人员来说可能更清晰将来的代码：

const formFieldConfig = {
  zip: {
    type: 'component',
    label: 'Zip code',
    icon: 'place',
    component: ZipCodeInput, // <-- Don't create an element yet
  }, 
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map(({ component, ...rest, }) => {
          const Component = (component && (rest.type === 'component'))
            ? component
            : textField // <-- Assuming this is also a React component

          return <Component onChange={onChange} {...rest} />
        })
      }
    </div>
  );
}

很难确定在不查看代码的情况下该方法是否可以与TextField一起使用，但是也很难使它与getTextField一起使用。

如何强制将prop分配给React组件？

2 个答案: