时间戳

首页 > 解决方案 > 如何避免为组件的 prop 调用相同的函数：ReactJS

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

问题描述

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

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

下面是我的代码

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

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

标签： javascriptreactjsreact-component

解决方案

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

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

IE

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

<SampleComponent {...someObj} />

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

推荐阅读