Как условно добавлять атрибуты для реагирования элемента DOM

У меня есть сценарий, когда я использую React.js для создания div, используя следующий код:

React.createElement('div', {}, "div content")

Некоторая дополнительная обработка javascript позволит мне впоследствии вывести, если этот div должен иметь атрибут className, установленный в «ClassA» или «ClassB», или вообще не должен иметь className.

Есть ли способ в javascript для доступа к div, который был создан из React DOM, и добавить к нему атрибут className?

Примечание. Я не мог добиться этого, это JSX, поэтому я прибегал к методу createElement.

Изменить: стоит упомянуть, что мне может потребоваться условно добавить атрибуты, отличные от className. Например, мне может потребоваться добавить к тегу привязки атрибут «alt» или не использовать условную логику. Заранее спасибо.

javascript,reactjs,attributes,conditional,react-jsx,

5

Ответов: 4

4

Используйте распространение JSX . Создайте и создайте объект с помощью реквизита, измените его, как вам нравится, и передайте его компоненту следующим образом:

const props = {
    name: 'SomeName'
}

if (true) {
    props.otherName = 'otherName';
}

return (
    <SomeComponent {...props}/>
);

См. ...Этот синтаксис? Этот оператор распространения выполняет эту работу - все реквизиты окажутся отдельными атрибутами вашего компонента.

Взгляните на этот плунж: http://www.webpackbin.com/4JzKuJ9C-

0

Поскольку вы пытались изначально иметь свою логику в JSX. У меня есть решение jsx, которое использует состояние

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      classValue: ''
    }
  }
  handleClick = () => {
    if(this.state.classValue == '') {
      this.setState({classValue : 'green'});
    }
    else if(this.state.classValue == 'green') {
      this.setState({classValue : 'blue'});
    }
    else {
       this.setState({classValue : 'green'});
    }
  }
  render() {
    return (
    <div>
      <div className={this.state.classValue}>Hello World</div>
      <button onClick={this.handleClick()}>Toggle</button>
    </div>
  )}
}

ReactDOM.render(<App/>, document.getElementById('app'));
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>

В этом примере показано, как вы можете изменить имя класса аналогично, используя состояние, которое вы можете установить, какие атрибуты вы хотите изменить.

0

Синтаксис ES6 можно использовать для достижения желаемой функциональности

const yourComponentProps = {
  [ifThisIsTrue ? 'useThisName' : 'useAnotherName']: 'yourDesiredValue',
};

return <YourComponent {...yourComponentProps} />
-1

Это вполне нормальная ситуация в реактиве и требует практически никакой специальной обработки.

Примечание. Лучше всего разрезать реквизиты по дереву компонентов декларативно, но если это не вариант, вы можете связать функции прослушивателя componentDidMountи отпереть их, componentWillUnmountкак показано в следующем примере. Пока они вызывают setState, функция рендеринга вашего компонента будет активирована.

const { Component, cloneElement } = React

class Container extends Component {
  constructor(props) {
    super(props)
    this.state = { classNames: [ 'foo' ] }
    this.appendClassName = () => {
      const { classNames } = this.state
      this.setState({ classNames: [ ...classNames, `foo_${classNames.length}` ] })
    }
  }
  componentDidMount() {
    document.querySelector('button').addEventListener('click', this.appendClassName)
  }
  componentWillUnmount() {
    document.querySelector('button').removeEventListener('click', this.appendClassName)
  }
  render() {
    const { children } = this.props
    const { classNames } = this.state
    
    return <div className={classNames.join(' ')}>{children}</div>
  }
}


ReactDOM.render(<Container>I am content</Container>, document.getElementById('root'))
.foo {
  font-family: monospace;
  border: 1px solid rgb(100, 50, 50);
  font-size: 1rem;
  border-style: solid;
  border-width: 1px;
  width: 50vw;
  height: 50vh;
  margin: auto;
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
}

.foo.foo_1 {
  font-size: 1.5rem;
  background-color: rgb(200, 100, 200);
}

.foo.foo_2 {
  font-size: 2rem;
  border-radius: 3px 7px;
  background-color: rgb(180, 120, 200);
}

.foo.foo_3 {
  border-style: dashed;
  background-color: rgb(175, 130, 180);
}

.foo.foo_4 {
  border-width: 2px;
  background-color: rgb(160, 165, 170);
}

.foo.foo_5 {
  border-width: 1rem;
  background-color: rgb(150, 200, 150);
}
<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>
<button>Click me</button>
<div id="root"></div>

PS - Избегайте использования componentWillMount, это может привести к ошибкам на жизненном цикле и говорить о том, что он может быть удален в будущей версии React. Всегда делайте асинхронные побочные эффектыcomponentDidMount и загружайте их внутрь componentWillUnmount. Даже если вам нечего делать, вам лучше всего отдать компонент-заполнитель до тех пор, пока ваши данные не поступят (лучший вариант для быстрой загрузки) или вообще ничего.

JavaScript, reactjs, атрибуты, условно, реагируют-JSX,
Похожие вопросы
Яндекс.Метрика