Question

我尝试编写一个返回JSX表达式的函数，如果该表达式达到一定长度以适合容器div，则该表达式将缩放字体大小。

我已经在其中规定了一个条件，即监视1）文本是否存在以及2）文本是否超出了我想要的长度。这是函数：

scaledName() {
  if (this.state.name && this.state.name.length <= 11) {
    return   (
      <div className="name-preview">{this.state.name}</div>
    );
  } else if (this.state.name && this.state.name.length > 11) {
    var length = this.state.name.length;
    var fontScale = 203 - (length - 11);
    var stringPercent = fontScale.toString() + '%';
    return (
      <div className="name-preview" style={{ fontSize: stringPercent }}>{
          this.state.name,
          console.log(stringPercent, 'font-size'),
          console.log(this.state.name, 'Név')
        }</div>

看看this.state.name.length是否超过11，对于每个新字符，我希望字体大小减小1％。

控制台同时记录stringPercent和`this.state.name变量，所有工作正常，除非字符串的长度超过11，整个字符串消失。

在CSS文件中是类：

.name-preview {
  position: absolute;
  top: 11.5rem;
  left: 34.5rem;
  right: 40rem;
  color: #000000;
  font-size: 203%;
  font-weight: bold;
  width: 13rem;
  text-align: center;
}

Answer 1

（这不是答案，这只是一种清理方法，因为它使我发疯。）

scaledName() {
  const { name } = this.state;

  if (!name) {
    return null;
  }

  if (name.length <= 11) {
    return (
      <div className="name-preview">{name}</div>
    );
  }

  const fontScale = 214 - name.length;
  return (
    <div className="name-preview" style={{ fontSize: `${fontScale}%` }}>
      {name}
    </div>    
  );
}

实际上，我可能会将其移到一个稍微更智能但轻巧的组件中。这是完全未经测试的，但给出了一个大概的想法：

import { isEmpty } from 'lodash'; // Or whatever.

const ScaledName = ({ value, startingScale=203, scaleAtLength=11, scaleFactor=1 }) => {
  if (isEmpty(value)) {
    return null;
  }

  const styles = {};

  if (value.length > scaleAtLength) {
    const scaleDelta = (value.length - scaleAtLength) * scaleFactor;
    const fontScale = startingScale - scaleDelta;

    styles.fontSize = `${fontScale}%`;
  }

  return (
    <div className="name-preview" style={styles}>
      {value}
    </div>
  );
};

文字达到要求的长度后消失

1 个答案: