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

Question

基本上，我在渲染函数内部的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

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

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

ie

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

<SampleComponent {...someObj} />

这会将道具的持续时间，时间，日期，地点等添加到您的组件中。不知道我是否有足够的背景信息，但这可能会有所帮助

Answer 2

我们可以做这样的事情-：

还添加了null失败安全检查弹出项。

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

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