Можно ли динамически устанавливать минимальную и максимальную ширину для тегов p в React? - PullRequest
Новая
       11

Можно ли динамически устанавливать минимальную и максимальную ширину для тегов p в React?

0 голосов
/ 14 июля 2020

Сейчас я пытаюсь динамически установить минимальную и максимальную ширину, но не знаю, с чего начать. Прямо сейчас у меня есть ширина тегов p, и я хотел бы получить минимальную ширину переменной внутри тега p, а максимальную ширину - 100% - min-width. Вот что у меня сейчас есть: 

constructor(props) {
    super(props);
    this.state = {
      width: 0,
    };
    this.resizeHandler = this.resizeHandler.bind(this);
    this.divElement = React.createRef();
  }
  componentDidMount() {
    this.resizeHandler();
    window.addEventListener('resize', this.resizeHandler);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeHandler);
  }
  resizeHandler() {
    const width = this.divElement.offsetWidth;
    this.setState({ width });
  }

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

    if (!currentSheetVersion || currentSheetVersion.size === 0) {
      return <p className="ml3">{getLocText('LOADING')}</p>;
    }

    const drawingNumber = currentSheetVersion.get('drawingNumber');
    const drawingTitle = currentSheetVersion.get('name');

    const displayTitle = !(isNil(drawingTitle) || drawingTitle === '');
    // min width: Equal to input value, If both min-width > 50%, max-width = 50%,
    // else: Max width: 100 - other value.

    return (
      <div
        id="webviewer-subheader-label"
        className="row justify-start w100 flex-nowrap"
      >
        <p
          id="drawing-number-label"
          title={drawingNumber}
          className="larger regular truncate pr3"
          ref={divElement => {
            this.divElement = divElement;
          }}
        >
          {drawingNumber} {this.state.width}
          <span className="pl1">-</span>
        </p>
        {displayTitle && (
          <p
            id="drawing-title-label"
            title={drawingTitle}
            className="larger light truncate"
          >
            {drawingTitle}
          </p>
        )}
      </div>
    );

Я использую refs для хранения ширины и хотел бы, чтобы min-width была шириной того, что хранится в переменных. Возможно ли это?

...