Реагируйте на условные имена классов, используя строки шаблона и оператор && - PullRequest
Новая
       16

Реагируйте на условные имена классов, используя строки шаблона и оператор &&

0 голосов
/ 16 мая 2018

В StackOverflow было много вопросов, касающихся применения условных имен классов к компонентам React;однако я не нашел хорошего ответа для этой конкретной ситуации:

У меня есть базовый div, который я хочу условно применить класс "is-required".Вот мой подход: 

<div className={`some-class ${isRequired && 'is-required'}`}>

Основная проблема заключается в том, что когда isRequired имеет значение false, мой скомпилированный HTML-код выглядит примерно так: 

<div class='some-class false'>

Очевидно, я мог бы использоватьтроичный оператор, подобный этому, так что я могу вместо этого вернуть пустую строку: 

<div className={`some-class ${isRequired ? 'is-required' : ''}`}>

Но затем в скомпилированном HTML-коде есть это дополнительное случайное пространство, включенное в класс, которое не вызовет проблем рендеринга,но мне все еще не нравится: 

<div class='some-class '>

Даже если бы я мог удалить пробел после «someClass» и включить его перед «isRequired», но теперь его труднее читать и он выглядит неуклюжим:

<div className={`some-class${isRequired ? ' is-required' : ''}`}>

Я слышал об утилитах, таких как имена классов, но я ищу простое решение, в котором мне не нужны никакие дополнительные пакеты.

Какой рекомендуемый подход здесь?

Ответы [ 3 ]

0 голосов
/ 16 мая 2018

Возможно, вы найдете эту полезную функцию полезной (она будет использоваться в качестве тегового шаблона): 

const c = (strings = [], ...classes) => {
  let myClass = '';
  strings.forEach((s, i) => {
    myClass += s + (classes[i] || '');
  });

  return myClass.trim().replace('  ', ' ');
}

Теперь вы можете использовать ее следующим образом: 

className={c`my-class ${this.props.done && 'done'} selected`}

или

className={c`some-class ${isRequired && 'is-required'} ${isDisabled && 'some-disabled-class'}`}
0 голосов
/ 26 марта 2019

Я настоятельно рекомендую использовать этот пакет для объединения имен классов, если вы используете систему импорта / экспорта.

https://www.npmjs.com/package/classnames

0 голосов
/ 16 мая 2018

На самом деле, есть много способов сделать это, вот один из них. 

<div className={isRequired ? 'some-class is-required': 'some-class'}>

или вы можете вернуть null

<div className={isRequired ? 'is-required' : null}>

По порядку, если у вас есть несколько классов. 

<div className={isRequired ? 'some-class is-required': isDisabled ? 'some-disabled-class' : 'some-class'}>

https://reactjs.org/docs/conditional-rendering.html

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      isRequired: false
    };
}

  render() {
    return (
      <div className="App">
       <div className={this.state.isRequired ? 'is-required' : null}>Null</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
...