クラス名をreactコンポーネントに渡してスタイルを変更しようとしていますが、うまくいかないようです：
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>
);
}classnames 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>興味のある方のために、私はcssモジュールを使用してcssモジュールを反応させたときに同じ問題に遭遇しました。
ほとんどのコンポーネントにはcssモジュールスタイルが関連付けられています。この例では、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ボタン1のようになりますが.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} );他の人が述べたように、中括弧で解釈された式を使用してください。
ただし、デフォルトを設定することを忘れないでください。
他の人は、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: '',
};これは、を使用して親コンポーネントから子コンポーネントに渡された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による文字列補間のサポートにより、次のことが可能になります。
class Pill extends React.Component {
render() {
return (
<button className={`pill ${this.props.styleName}`}>{this.props.children}</button>
);
}
}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;
}