2016-04-18 13 views
1

私は現在、反応の問題を解決しようとしています。
私はSalesChannelsというコンテナにアイコンを追加できるようにします。 はここsalesChannelsページへのコードです:(JSX)反応する - コンポーネント内のヘッダーにアイコンを追加する

import React, { Component } from 'react'; 
import PageContent from 'components/PageContent'; 
import IBox from 'components/IBox'; 

export default class SalesChannelsPage extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      rows: [] 
     } 
    } 

    render() { 
     return (
      <PageContent header="Salgskanaler"> 
       <IBox title="Salgskanaler"> 

       </IBox> 
      </PageContent> 
     ); 
    } 
} 

あなたが見ることができるように、私はIBOXと呼ばれるコンポーネントを追加しました。これは、再利用可能でなければなりません それは次のようになります。 - :だから

import React, {Component} from 'react'; 

export default class IBoxTools extends Component { 
    render() { 
     let icon; 

     if(this.props.icon) { 
      icon = (
       <a title={this.props.title}> 
        <i onClick={() => this.iconClicked()} className={`pull-right ${this.props.icon}`}></i> 
       </a> 
      ); 
     } 

     return icon; 
    } 

    iconClicked() { 
     console.log('icon clicked') 
    } 
} 

私がしようとしています私は何も別のコンポーネントと呼ばれるIBoxToolsを作成した

import React, {Component} from 'react'; 
import IBoxTools from './IBoxTools' 

export default class IBox extends Component { 
    render() { 
     return(
      <div className="ibox"> 
       <div className="ibox-title"> 
        {this.props.title} 

       //this is where the icon should be rendered in the dom 

       </div> 
       <div className="ibox-content"> 
        {this.props.children} 
       </div> 
      </div>  
     ); 

    } 
} 

が、これは実際のアイコン/「i」のタグが含まれていますIBoxコンポーネントをそれに依存させずに、IBoxタグ内のSalesChannelsページにマルチアイコンを追加します。

お手伝いができたら幸いです。ありがとう!

答えて

0

あなたが次にIBoxの内側にあなたが...それを渡すと、アイコン(または任意の他)をレンダリングする{ this.props.icons }を書くだけでchildren

<IBox 
    title="Salgskanaler" 
    icons={[ 
    <IBoxTools key="icon1" icon="foo" />, 
    <IBoxTools key="icon2" icon="bar" /> 
    ]} 
> 
    {/* normal children here */} 
</IBox> 

のような小道具のコンポーネントのコンポーネントまたは配列を渡すことができますがそれ以外の場合は表示されます小道具が定義されていない場合は何もありません。

+0

素晴らしい、ありがとう、それは働いた! :) – PatrickGoethe

0

毎回アイコンを表示したくない場合は、条件を使用することができます。私は...あなたがしようとしているもの

import React, {Component} from 'react'; 
import IBoxTools from './IBoxTools' 

export default class IBox extends Component { 
    render() { 
     return(
      <div className="ibox"> 
       <div className="ibox-title"> 
        {this.props.title} 

       //this is where the icon should be rendered in the dom 
       {(condition) ? <IBoxTools /> : ""} 

       </div> 
       <div className="ibox-content"> 
        {this.props.children} 
       </div> 
      </div>  
     ); 

    } 
} 

を理解していればそれとも、それを複数回行う必要がある場合、あなたが言ったように、私はマップ機能を持つunderscore.jsまたはそれのようなものを使用します。

{_.map(icons, function(icon) { 
    return (
     <IBoxTools /> 
    ) 
})} 

または2つの組み合わせです。

+0

通常のJavaScriptには 'map'関数がありますhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map – azium

+0

ありがとうございました! :) – PatrickGoethe

関連する問題