Question

您的组件中定义了多个句柄，可根据更改的元素更新商店的状态

_handleHyperlink2ColorChange:function(color){
     this._setDataChanged('hyperlink1_color');
    var updateObj = {
                       bannerData:{
                           hyperlink2Color:color,
                       },
                     };
     this._handleFormChange(updateObj);
   },

   _handleDescriptionChange:function(newDescription){
     this._setDataChanged('banner_description');
     var updateObj = {
                       bannerData:{
                           description:newDescription,
                       },
                     };
      this._handleFormChange(updateObj);   
   },

   _handleHeadingChange:function(newHeading){
     this._setDataChanged('banner_heading');
     var updateObj = {
                       bannerData:{
                          heading:newHeading,
                       },
                     };

     this._handleFormChange(updateObj);
   },

正如我们所看到的那样，除了要更改的属性之外，所有三个处理程序都没有什么不同。那么如何在一个函数中处理它呢？

基本上我想知道如何使用变量处理属性名称？

修改

按照如何调用这些处理程序的示例

 this.props.onDescriptionChange(this.state.slideDetails);

OnDescriptionChange从父组件到子组件的_handleDescriptionChange

Answer 1

你可以＆＃34;建立＆＃34;这些功能如下：

function builder(selector, property){
    return function(value){

     this._setDataChanged(selector);
         var updateObj = {
             bannerData:{}
         };
         updateObj.bannerData[property] = value;
         this._handleFormChange(updateObj);  
    };
};

_handleHyperlink2ColorChange: builder("hyperlink1_color", "hyperlink2Color"),
_handleDescriptionChange: builder("banner_description", "description"),
_handleHeadingChange: builder("banner_heading", "heading"),

现在您要做的就是将函数中的唯一名称传递给builder函数。

Answer 2

您可以使用Function.prototype.bind。

_handlePropertyChange: function(dataChanged, propertyName, newValue){
     this._setDataChanged(dataChanged);
     var updateObj = { bannerData: {} };
     updateObj.bannerData[propertyName] = newValue;
     this._handleFormChange(updateObj);
}

然后，将其他参数绑定到您在子组件props中传递的回调。

<ChildComponent
    onDescriptionChange={this._handlePropertyChange('banner_description', 'description')}
/>

优化react js中的代码

2 个答案: