如何避免为组件的道具调用相同的函数：ReactJS

Question

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

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

下面是我的代码

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

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

Answer 1

obj1、obj2、obj3 等来自哪里？它们是道具吗？

如果更容易的话，您也可以将对象作为组件的 props 传播

即

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

<SampleComponent {...someObj} />

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

Answer 2

我们可以这样做 -:

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

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

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

Answer 3

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

列出参数并将它们放在一个数组中：

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

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

这是完整的片段：

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

如何避免为组件的道具调用相同的函数：ReactJS

How to avoid calling same function for a prop for a component : ReactJS

javascript

reactjs

react-component