使用reactstrap

Question

我试图基于reactstrap Dropdown组件为我的组件设置内联样式，但我无法理解为什么仅当我在道具中直接使用对象时它才起作用。

这是我的代码：

class DropDownComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = { dropdownOpen: false };
    const { width } = this.props;
    this.width = width ? { width: `${width}px`,} : {};
    DropDownComponent.propTypes = {};
    this.toggle = this.toggle.bind(this);
    this.getWidth = this.getWidth.bind(this);
  }

  toggle () {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

  getWidth () {
    const { size } = this.props;
    return size ? { width: `${size}px`,} : {};
  };

  render () {
    const { size } = this.props;

    const test = this.getWidth();
    const test2 = { width: `150px`,};
    const test3 = this.width;
    debugger;
    return (
      <Dropdown isOpen={this.state.dropdownOpen} className='ml-2 dropDown-container d-flex' toggle={this.toggle}>
        <DropdownToggle
          caret={!this.props.noPadding}
          tag='span'
          className={!this.props.noPadding ? 'dropdDown-padding dropdDown-colorButton  lightGreenBlue ' : 'dropdDown-colorButton  lightGreenBlue '}
          onClick={this.toggle}
          style={this.getWidth()}
          data-toggle='dropdown'
          aria-expanded={this.state.dropdownOpen}
        >
          {this.props.buttonName}
        </DropdownToggle>
        <DropdownMenu className='dropdDown-itemContainer lightGreenBlue'>
          {this.props.items &&
            this.props.items.map((item, index) => {
              return (
                <div
                  onClick={() => {
                    this.props.onChange(item);
                    this.toggle();
                  }}
                  className={this.props.itemsClassName}
                  style={this.getWidth()}
                  key={index}
                  value={item}
                >
                  {item}
                </div>
              );
            })}
        </DropdownMenu>
      </Dropdown>
    );
  }
}

正如您在调试器中看到的那样，这3个值（来自类函数或类prop）是相同的，但仅当我直接使用新创建的对象时才起作用：

您能解释一下这三个版本有什么区别以及为什么它可以工作吗？