컴포넌트를 반응시키기 위한 전달

컴포넌트를 반응시키기 위한 전달

스타일을 변경하기 위해 반응 컴포넌트에 클래스 이름을 전달하려고 하는데 작동하지 않습니다.

class Pill extends React.Component {

  render() {

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

}

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

각각의 스타일이 있는 반의 이름을 전달하여 알약의 스타일을 바꾸려고 합니다.나는 React에 처음이라 아마 내가 이것을 제대로 하고 있지 않을 것이다.감사해요.

React에서 해석된 식을 전달하려면 한 쌍의 곱슬괄호를 열어야 합니다.시험:

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

클래스 이름 npm 패키지 사용

import classnames from 'classnames';

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

참고로 스테이트리스 컴포넌트의 경우:

// 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>

pill ${this.props.styleName}소품을 세팅하지 않으면 "pill defined"가 됩니다.

나는 더 좋다

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

또는

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

관심 있는 사람이라면 css 모듈 및 react css 모듈을 사용할 때 이와 같은 문제가 발생했습니다.

대부분의 컴포넌트에는 관련된 css 모듈스타일이 있습니다.이 예에서는 Promo 부모 컴포넌트와 마찬가지로 my button에는 자체 css 파일이 있습니다.하지만 프로모션의 버튼에 몇 가지 추가 스타일을 전달하고 싶습니다.

그래서...styleAble 버튼은 다음과 같습니다.

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.css 스타일은 공통 버튼 스타일을 처리합니다.이 예에서는,.button학급

그런 다음 버튼을 사용하고 싶은 내 컴포넌트에서 버튼의 위치 등을 수정하고 싶은 경우 추가 스타일을 설정할 수 있습니다.Promo.css그 다음,className이 예에서 다시 한 번 spoice라고 합니다..button수업이라 불러도 될 것 같아서요 promoButton.

물론 css 모듈에서는 이 클래스는.Promo__button___2MVMD버튼은 뭐랄까.Button__button___3972N

프로모션.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} );

이미 설명한 바와 같이 해석된 표현은 중괄호로 묶어서 사용합니다.

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

하지만 당신의 프로포즈를 선언하는 것이 더 좋을 것이다.

완전한 예:

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: '',
};

Typescript에서 다음 유형을 설정해야 합니다.HTMLAttributes그리고.React.FunctionComponent.

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

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

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

이를 실현하려면 다음 명령을 사용하여 부모 컴포넌트에서 자식 컴포넌트로 전달된 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>
  }
}

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>
        );
    }
}

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

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

언급URL : https://stackoverflow.com/questions/32230635/passing-in-class-names-to-react-components