Question

我目前正在尝试解决反应问题我希望能够将图标添加到名为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';
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>    
        );

    }
}

我还创建了另一个名为IBoxTools的组件 - 它包含实际图标/＆＃34; i＆＃34;标记：

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

所以我想做的是在IBox标签内的SalesChannels页面添加多个图标，而不会让IBox组件依赖它。

我希望你能提供帮助。谢谢！

Answer 1

如果您不想每次都显示图标，则可以使用条件。如果我明白你要做什么......

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

或两者的某种组合。

Answer 2

您可以在道具中传递组件或组件数组，就像children

一样

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

然后在IBox内你写{ this.props.icons }，如果你把它传递给它们将会渲染图标（或其他任何东西）。否则如果道具未定义则不会显示任何内容。

反应 - 向组件内的标头添加图标

2 个答案: