Блог

У меня есть функция, которая проверяет, какова длина переданного в реквизите, и если длина слишком велика, я хочу настроить размер шрифта, чтобы он был меньше. (Я не могу использовать динамическую ширину, потому что компонент имеет пользовательскую анимацию)

Текущий Код

 const checkLength = () => {
  if (props.text.length > 7) {
    return "15px";
  } else {
    return "17px";
  }
};

const MyButton = styled.button`
  font-size: 17px;
`
 

Я пытался написать это так, но он не читает функцию.

 const MyButton = styled.button`
  font-size: checkLength();
`
 

Спасибо за пример кода. checkLength Функция должна находиться в области, из которой она доступна MyButton . В функциях, которые вы передаете литералам шаблона стилизованного компонента, у вас есть доступ ко всем реквизитам, которые передаются компоненту при визуализации. Я расширил ваш код , включив в него два варианта использования MyButton , взгляните:

 const App = () => {
  return (
    <div>
      <MyButton text="hello">
        <span>hello</span>
      </MyButton>
      <MyButton text="yar">
        <span>yar</span>
      </MyButton>
    </div>
  )  
}
  
const checkLength = (props) => {
  if (props.text.length > 4) {
    return '20px';
  } else {
    return '24px';
  }
}

const MyButton = styled.button`
  font-size: ${checkLength};
`

ReactDOM.render(<App />, document.getElementById('app'));

 

Вы можете встроить код в литералы строкового шаблона. Вы делаете это с помощью знака долара и скобок: ${} . Все, что вам нужно сделать, это завернуться checkLength в них. Просто функция в порядке, не нужно ее вызывать:

 const MyButton = styled.button`
  font-size: ${checkLength};
`
 

Вы также можете написать это таким образом:

 const MyButton = styled.button`
  font-size: ${props => checkLength(props)};
`
 

Вы можете прочитать больше об этом синтаксисе здесь