React - 子コンポーネントにクラスを追加する

imは反応を使用しており、子をレンダリングして条件に応じてクラスを追加するだけのコンポーネントがあります。これを行う最善の方法は何ですか？React - 子コンポーネントにクラスを追加する

2016-08-30 Pachu

[この]（http://stackoverflow.com/questions/26863938/modify-attributes-of-children-in-reactjs-component）お手伝いをする必要があります。 –

私はこれは何私である、一週間前にそれを考え出しました欲しかっ：

export default class ContainerComponent extends React.Component { 
    constructor(props) { 
     super(props); 

     this.modifyChildren = this.modifyChildren.bind(this); 
    } 

    modifyChildren(child) { 
     const className = classNames(
      child.props.className, 
      {...otherClassses} 
     ); 

     const props = { 
      className 
     }; 

     return React.cloneElement(child, props); 
    } 
    render() { 
     return (<div> 
      {React.Children.map(this.props.children, this.modifyChildren(child))} 
     </div>); 
    } 
}

出典

2016-09-17 17:28:52 Pachu

私はこの解決策を試みましたが、レンダリング機能からエラーが発生しました。 "子は定義されていません。"私が匿名関数に変更した場合、クラスメソッド（あなたの例ではthis.modifyChildren）を呼び出すのではなく、エラーがなくなり、すべて正常に動作します。これは、 "太い矢印"と従来のJS無名関数の両方で動作します。私たちのコードがほぼ同じ場合、なぜあなたのために、私のためにはうまくいかないのか分かりません。 –

内部コンポーネントのメソッドレンダリング：

var childClasses = [], 
    childClassNames; 
if (condition) { 
    childClasses.push('my-class-name'); 
} 
childClassNames = childClasses.join(' '); 

return (<div className={childClassNames}> 
    .... (your component here) 
</div>);

出典

2016-08-30 12:07:52 Maggie

私はそれぞれのコンポーネントでそれをやりたいとは思っていません。テストを行い、必要ならばクラスを追加するコンポーネントが必要です – Pachu

正確に何を達成しようとしているのかよく分かりません。あなたの親コンポーネントは、必要なクラスをすべて計算し、それらを小道具として子どもに渡すことができます。 – Maggie

あなたが子供に小道具を伝承することができますし、それを適用するためにどのようなクラスを選択することができます（あるいは単にクラス名を渡しますが、これはもっとセマンティックです）：

をあなたの子供で

レンダリング：

const classes = []; 

if (props.contentVisible) 
    classes.push('visible'); 

<div className={classes.join(' ')} />

出典

2016-08-30 12:09:48

React - 子コンポーネントにクラスを追加する

答えて

関連する問題