0

I have one problem in Divi Custom module building, I have some props: php side

public function render( $attrs, $content = null, $render_slug ) {
        $id = ET_Builder_Element::get_module_order_class( $render_slug );
        $bg_image = $this->props['bg_image'];
        $bg_image_overlay_color = $this->props['bg_image_overlay_color'];
        $text_1 = $this->props['text_1'];
        $text_1_border_color = $this->props['text_1_border_color'];
        $text_1_border_width = $this->props['text_1_border_width'];
        $text_2 = $this->props['text_2'];
        $text_2_border_color = $this->props['text_2_border_color'];
        $text_2_border_width = $this->props['text_2_border_width'];
        $animation_speed = $this->props['animation_speed'];

        return sprintf( '
        <style>
        .%1$s .rbx_hover_card_1_wrap:hover h3:after,
        .%1$s .rbx_hover_card_1_wrap h3:after  {
            background: %5$s;
            height: %6$spx;
        }
        
        .%1$s .rbx_hover_card_1_wrap span {
            border-right: %9$spx solid %8$s;
        }
        .%1$s .rbx_hover_card_1_wrap {
            background: %3$s;
        }
        .%1$s .rbx_hover_card_1_wrap img {
            transition: opacity %10$s, transform %10$s;
        }
        .%1$s .rbx_hover_card_1_wrap h3 {
            -webkit-transition: all %10$s;
            -o-transition: all %10$s;
            transition: all %10$s;
        }
        .%1$s .rbx_hover_card_1_wrap span {
            -webkit-transition: right %10$s, opacity %10$s;
            transition: right %10$s, opacity %10$s;
        }
        </style>
        <div class="%1$s rbx_hover_card_1_wrap">
            <img src="%2$s">
            <h3>%4$s</h3>
            <span>%7$s</span>
        </div>',
        $id,
        $bg_image,
        $bg_image_overlay_color,
        $text_1,
        $text_1_border_color,
        $text_1_border_width,
        $text_2,
        $text_2_border_color,
        $text_2_border_width,
        $animation_speed
        );
    }

并且它在 php 方面工作得很好，但是在我复制模块时，如果我更改边框颜色或其他参数道具，它在前面的构建器中的 jsx 中工作......它改变了第一个而不是第二个......我也在使用订单类。在前端它的工作完美，但在构建器方面有问题，这是 jsx：

// External Dependencies
import React, { Component, Fragment } from 'react';

// Internal Dependencies
import './style.css';

class RBXHoverCard1JSX extends Component {

  static slug = 'rhc1ak_rbx_hover_card_1';

  render() {
    const orderClass = `${this.props.moduleInfo.type}_${this.props.moduleInfo.order}`;


    return (
      <Fragment>
         <style dangerouslySetInnerHTML={{__html: `
         
         .${orderClass} .rbx_hover_card_1_wrap h3:hover h3:after,
         .${orderClass} .rbx_hover_card_1_wrap h3:after  {
           background: ${this.props.text_1_border_color}!important;
           height: ${this.props.text_1_border_width}px !important;
         }
        
         .${orderClass} .rbx_hover_card_1_wrap {
           background: ${this.props.bg_image_overlay_color};
         }
         .${orderClass} .rbx_hover_card_1_wrap img {
           transition: opacity ${this.props.animation_speed}, transform ${this.props.animation_speed};
         }
         .${orderClass} .rbx_hover_card_1_wrap h3 {
           -webkit-transition: all ${this.props.animation_speed};
           -o-transition: all ${this.props.animation_speed};
           transition: all ${this.props.animation_speed};
         }
         .${orderClass} .rbx_hover_card_1_wrap span {
          border-right: ${this.props.text_2_border_width}px solid ${this.props.text_2_border_color};
           -webkit-transition: right${this.props.animation_speed}, opacity ${this.props.animation_speed};
           transition: right ${this.props.animation_speed}, opacity ${this.props.animation_speed};
           }
            
                `}}>
          
               </style>
     
      <div className={`${orderClass} rbx_hover_card_1_wrap`}>
      <img src={this.props.bg_image} alt={this.props.text_1} />
      <h3 >{this.props.text_1}</h3>
      <span>{this.props.text_2}</span>
    </div>
    </Fragment>
    );
  }
}

export default RBXHoverCard1JSX;

谁能帮我？

4

0 回答 0