반응 구성 요소에 클래스 이름 전달

Question 1

스타일을 변경하기 위해 반응 구성 요소에 클래스 이름을 전달하려고하는데 작동하지 않는 것 같습니다.

class Pill extends React.Component {

  render() {

    return (
      <button className="pill {this.props.styleName}">{this.props.children}</button>
    );
  }

}

<Pill styleName="skill">Business</Pill>

나는 각각의 스타일을 가진 클래스의 이름을 전달하여 알약의 스타일을 변경하려고합니다. 저는 React를 처음 사용하므로 올바른 방법으로 수행하지 않을 수 있습니다. 감사

Question 2

React에서 해석 된 표현식을 전달하려면 중괄호 쌍을 열어야합니다. 시험:

render () {
  return (
    <button className={`pill ${ this.props.styleName }`}>
      {this.props.children}
    </button>
  );
}

은 Using 클래스 이름 NPM 패키지를

import classnames from 'classnames';

render() {
  return (
    <button className={classnames('pill', this.props.styleName)}>
      {this.props.children}
    </button>
  );
}

Question 3

참조 용으로 상태 비 저장 구성 요소의 경우 :

// ParentComponent.js
import React from 'react';
import { ChildComponent } from '../child/ChildComponent';

export const ParentComponent = () =>
  <div className="parent-component">
    <ChildComponent className="parent-component__child">
      ...
    </ChildComponent>
  </div>

// ChildComponent.js
import React from 'react';

export const ChildComponent = ({ className, children }) =>
  <div className={`some-css-className ${className}`}>
    {children}
  </div>

렌더링 :

<div class="parent-component">
  <div class="some-css-className parent-component__child">
    ...
  </div>
</div>

Question 4

pill ${this.props.styleName} 소품을 설정하지 않으면 "정의되지 않은 알약"이 표시됩니다.

나는 선호한다

className={ "pill " + ( this.props.styleName || "") }

또는

className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }

Question 5

관심있는 사람을 위해 css 모듈을 사용하고 css 모듈 에 반응 할 때 이와 동일한 문제가 발생했습니다 .

대부분의 구성 요소에는 연관된 CSS 모듈 스타일이 있으며이 예제에서 내 Button 에는 Promo 상위 구성 요소 와 마찬가지로 자체 CSS 파일이 있습니다. 하지만 몇 가지 추가 스타일을 전달하려는 버튼 에서 프로모션

따라서 style가능한 버튼은 다음과 같습니다.

Button.js

import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

class Button extends Component {

  render() {

    let button = null,
        className = ''

    if(this.props.className !== undefined){
        className = this.props.className
    }

    button = (
      <button className={className} styleName='button'>
        {this.props.children}
      </button>
    )

    return (
        button
    );
  }
};

export default CSSModules(Button, styles, {allowMultiple: true} )

위의 Button 구성 요소에서 Button.css 스타일은 일반적인 버튼 스타일을 처리합니다. 이 예에서는 .button클래스

그런 다음 Button 을 사용하려는 구성 요소에서 버튼 의 위치와 같은 사항도 수정하고 싶은 경우 추가 스타일을 설정 Promo.css하고 className소품 으로 전달할 수 있습니다 . 이 예에서는 다시 .button클래스 라고 합니다. 나는 그것을 예를 들어 무엇이든 부를 수 있었다 promoButton.

물론 css 모듈을 사용하면이 클래스는 .Promo__button___2MVMD다음과 같은 반면 버튼은 다음과 같습니다..Button__button___3972N

Promo.js

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';

import Button from './Button/Button'

class Promo extends Component {

  render() {

    return (
        <div styleName='promo' >
          <h1>Testing the button</h1>
          <Button className={styles.button} >
            <span>Hello button</span>
          </Button>
        </div>
      </Block>
    );
  }
};

export default CSSModules(Promo, styles, {allowMultiple: true} );

Question 6

다른 사람들이 언급했듯이 중괄호와 함께 해석 된 표현식을 사용하십시오.

그러나 기본값을 설정하는 것을 잊지 마십시오.
다른 사람들은 OR 문을 사용하여 빈 문자열을 설정할 것을 제안했습니다 undefined.

그러나 Prop을 선언하는 것이 더 좋습니다.

전체 예 :

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Pill extends Component {

  render() {

    return (
      <button className={`pill ${ this.props.className }`}>{this.props.children}</button>
    );
  }

}

Pill.propTypes = {
  className: PropTypes.string,
};

Pill.defaultProps = {
  className: '',
};

Question 7

를 사용하여 부모 구성 요소에서 자식 구성 요소로 전달 된 className을 "보간"하여이를 수행 할 수 있습니다 this.props.className. 아래 예 :

export default class ParentComponent extends React.Component {
  render(){
    return <ChildComponent className="your-modifier-class" />
  }
}

export default class ChildComponent extends React.Component {
  render(){
    return <div className={"original-class " + this.props.className}></div>
  }
}

Question 8

React 16.6.3 및 @Material UI 3.5.1에서는 다음과 같은 className 배열을 사용하고 있습니다. className={[classes.tableCell, classes.capitalize]}

귀하의 경우 다음과 같이 시도하십시오.

class Pill extends React.Component {
    render() {
        return (
           <button className={['pill', this.props.styleName]}>{this.props.children}</button>
        );
    }
}

Question 9

React의 문자열 보간 지원을 통해 다음을 수행 할 수 있습니다.

class Pill extends React.Component {
    render() {
       return (
          <button className={`pill ${this.props.styleName}`}>{this.props.children}</button>
       );
    }
}

Question 10

Typescript에서 HTMLAttributes및 유형을 설정해야합니다 React.FunctionComponent.

대부분의 경우 다른 인터페이스 또는 유형으로 확장해야합니다.

const List: React.FunctionComponent<ListProps &
  React.HTMLAttributes<HTMLDivElement>> = (
  props: ListProps & React.HTMLAttributes<HTMLDivElement>
) => {
  return (
    <div className={props.className}>
      <img className="mr-3" src={props.icon} alt="" />
      {props.context}
    </div>
  );
};

interface ListProps {
  context: string;
  icon: string;
}