如何避免为组件的 prop 调用相同的函数：ReactJS答案

【问题标题】：How to avoid calling same function for a prop for a component : ReactJS如何避免为组件的 prop 调用相同的函数：ReactJS
【发布时间】：2019-12-16 06:13:59
【问题描述】：

基本上，我在组件内多次调用相同的函数，以获得渲染函数内的道具。

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

下面是我的代码

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

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

【问题讨论】：

将其转换为您调用它的箭头函数。

标签： javascript reactjs react-component

【解决方案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 函数并将所有道具准备在一个地方，如下所示：

// 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。

这是完整的sn-p：

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

【讨论】：

感谢您的宝贵时间。如何从getProperties中挑选keyMap
啊等等，我会更新我的答案。应该是const getProperties = (key) => paramMap[key][keyMap[key]];
还有其他变化。

【解决方案2】：

obj1、obj2、obj3 等从何而来？它们是道具吗？

如果这样更容易，您还可以将对象作为组件的道具传播

即

const someObj = {
  duration: obj1,
  time: obj2,
  date: obj3,
  place: obj4
}

<SampleComponent {...someObj} />

这会将道具持续时间、时间、日期、地点等添加到您的组件中。不确定我是否有足够的上下文，但这可能会有所帮助

【讨论】：

更新了代码。 obj1, obj2, obj3, obj4 来自 param 本身。

【解决方案3】：

我们可以这样做——：

还为 pops 添加了 null 故障安全检查。

getPropsForSampleComponent = {
    duration: obj1 || null, 
    time: obj2 || null, 
    date: obj3 || null, 
    place: obj4 || null
}

render() {
    return (
        <SampleComponent
            {...this.getPropsForSampleComponent}
    )
}

【讨论】：