classNameを追加してもCSSはReactJSコンポーネントに影響しません

Question

私はdivを返す単一ボックスと呼ばれるコンポーネントを持っていますが、6回同じクラスを持つ必要があります。しかし、それは良い方法ではありません。

私はMultiple Boxの別のコンポーネントを作ったので、ここではSingle Boxコンポーネントを6回ループします。

SingleBox

render(){ 
    return(
     <div className="box-content"></div> 
    ) 
    } 

MultipleBoxは、ここで "第三SingleBox" の

render(){ 
    let singleBoxArray = []; 
    for (var i=0; i<3; i++) { 
    if(i< 2){ 
     singleBoxArray.push(<SingleBox key={i}/>); 
    }else { 
     singleBoxArray.push(<SingleBox className="box-three"/>) 
    } 
    } 
    return(
     <div> 
     {singleBoxArray} 
     </div> 
    ) 

    } 

、私は1つの以上のクラスを追加する必要があり、それがCSSに影響を与える必要があります。私がconsole.log（ "array"、singleBoxArray）を作るとき。 3番目のelememetについては、this.propsのclassNameを取得していますが、私のCSSは変更されていません。アドバンス

Answer 1

最初で

多くのおかげで、あなたはrenderに戻ってきている変数singleBox何であるか、className="box-three" 秒間、中括弧を必要としない、私はどこでもその宣言を見つけることができない、多分あなた代わりにsingleBoxArrayを返します。

Answer 2

DOMにではなくコンポーネントにクラスを追加しています。

CSSが表示されないのはなぜですか。

SingleBoxコンポーネントが既にbox-contentクラスに関連付けられており、更新していません。

DOMを更新するには、DOMにクラスを追加する必要があります。カスタムクラスのための

使用propsmyclass

//SingleBox Component. 

const SingleBox = (props) => (<div className={props.myclass}>Hello</div>); 

// MultipleBox

render() { 
    let singleBoxArray = []; 
    for (var i = 0; i < 3; i++) { 
     if (i < 2) { 
     singleBoxArray.push(<SingleBox key={i} myclass="box-content" />); 
     } else { 
     singleBoxArray.push(<SingleBox key={i} myclass="box-three" />) 
     } 
    } 
    return (
     <div> 
     {singleBoxArray} 
     </div> 
    ) 
    } 

Answer 3

あなたSingleBox Componentが小道具としてクラス名を受け付けません。

このようにする必要があります。

render(){ 
    const className = `box-content ${this.props.className}` 
    return(
     <div className={className}></div> 
    ) 
    } 

そして、あなたはあなたが単純にエクスポートする前に、このようにそれを設定することで、コンポーネントにdefaultPropsを設定することができます

空の文字列としてクラス名のデフォルトプロップを維持することができます。

SingleBox.defaultProps = { 
    className: '' 
} 

export default SingleBox;