web-dev-qa-db-ja.com

ReactおよびGatsbyのclassNameによってdom要素を選択する正しい方法

反応するのは初めてで、そこにある多くの簡単な例で簡単な答えを見つけることができません。 GatsbyとReactは実行時にクラス名を生成するので、私のクラスは.page1scssではsections-module--page1--2SNjF。

要素を選択してクラスを追加する正しい方法は何ですか？

import React from 'react';
import styles from '../scss/sections.module.scss';
import $ from 'jquery';

class Section extends React.Component {
    componentDidMount() {
       $(what??).addClass('active'); // how to select .page1 here
    }

    render() {
        return (
            <>
                <section className={styles.page1}>
                    <h2>section 1</h2>
                </section>
                <section className={styles.page2}>
                    <h2>section 2</h2>
                </section>
            </>
        )
    }
}

export default () => (
    <Section/>
)
reactjsgatsby
3
Samuel G

これにはjQueryは必要ないので、2つを混在させないようにする必要があります。

これを試してみてください。要素にアクセスできるように、要素への参照を作成する必要があります。

import React, { Component } from 'react';
import styles from '../scss/sections.module.scss';

class Section extends Component {
  constructor(props) {
    super(props);

    this.firstSection = React.createRef();
  }

  componentDidMount() {
    this.firstSection.classList.add(`${styles.page1} ${styles.active}`);
  }

  render() {
    return (
      <div>
        <section ref={this.firstSection}>
          <h2>section 1</h2>
        </section>
        <section className={styles.page2}>
          <h2>section 2</h2>
        </section>
      </div>
    )
  }
}

export default Section;

activeクラスをモジュールスタイルのSCSSファイルの適切な場所に追加して、正しく参照できるようにします。

sections.module.scss

.page1,
.page2 {
  &.active {
     background: red; 
  }
}

classnameslibを使用することもできます

import React, { Component } from 'react';
import styles from '../scss/sections.module.scss';
import classnames from 'classnames';

class Section extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activeSection: 1
    };
  }

  render() {
    const classes = classnames(styles.page1, {
      [styles.active]: this.state.activeSection === 1
    });

    return (
      <div>
        <section className={classes}>
          <h2>section 1</h2>
        </section>
        <section className={styles.page2}>
          <h2>section 2</h2>
        </section>
      </div>
    )
  }
}

export default Section;
2
dysfunc

これはうまくいくはずだと思います。 'page1'および'page2'のスペースに注意してください

    ...
    componentDidMount() {
       $(".page1").addClass('active'); 
    }
    ...
    <section className={styles.page1 + ' page1'}>
    ...
    <section className={styles.page2 + ' page2'}>
    ...
0
jpacareu