javascript - 如何避免为组件的 prop 调用相同的函数 : ReactJS

Question

基本上，我在组件内部多次调用同一个函数，以获取渲染函数内部的 Prop 。

如何避免为该特定 Prop 所需的组件多次调用相同的函数

下面是我的代码

getProperties = (name, param) => {
    switch(name){
        case 'duration':
            return param.obj1;
        case 'time':
            return param.obj2;
        case 'date':
            return param.obj3;
        case 'place':
            return param.obj4;
    }
}

render() {
    return (
        <SampleComponent
            duration={this.getProperties('duration', param1)}
            time={this.getProperties('time', param2)}
            date={this.getProperties('date', param3)}
            place={this.getProperties('place', param4)}
    )
}

因此，不要使用多种方法来获取所需的详细信息。如何使用单个方法来操作并返回带有转换后的数据的对象？

Answer 1

这是清理代码的一种方法:

1. 列出参数并将它们放入数组中:

const DURATION = "duration";
const TIME = "time";
const DATE = "date";
const PLACE = "place";


const allParamters = [DURATION, TIME, DATE, PLACE]

准备两个对象，paramMap 和 keyMap

• paramMap 是用于给定参数的对象。
• keyMap 是一个映射，它会说明给定参数使用哪个key。

const paramMap = {
  [DURATION]: param1,
  [TIME]: param2,
  [DATE]: param3,
  [PLACE]: param4
};

const keyMap = {
  [DURATION]: "obj1",
  [TIME]: "obj2",
  [DATE]: "obj3",
  [PLACE]: "obj4"
}

更新 getProperties 函数并在一处准备所有 Prop ，如下所示:

// for getProperties(DURATION), it will resolve to `param1.obj1!`
const getProperties = (key) => paramMap[key][keyMap[key]];


// this will prepare the `props` map as:
// { "duration": param1.obj1, ... }
const propsToPass = allParamters.reduce((props, aParam) => {
  props[aParam] = this.getProperties(aParam)
  return props;
}, {});

最后，更新 JSX:

<SampleComponent {...propsToPass} />

您需要做的就是在 param1、param2 和其他范围内正确定义 paramMap。

这是完整的代码片段:

const DURATION = "duration";
const TIME = "time";
const DATE = "date";
const PLACE = "place";


const allParamters = [DURATION, TIME, DATE, PLACE]

const paramMap = {
  [DURATION]: param1,
  [TIME]: param2,
  [DATE]: param3,
  [PLACE]: param4
};

const keyMap = {
  [DURATION]: "obj1",
  [TIME]: "obj2",
  [DATE]: "obj3",
  [PLACE]: "obj4"
}

const getProperties = (key) => paramMap[key][keyMap[key]];

const propsToPass = allParamters.reduce((props, aParam) => {
  props[aParam] = this.getProperties(aParam)
  return props;
}, {});

<SampleComponent {...propsToPass} />