反应-将图标添加到 header 内部组件

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 的组件 - 它包含实际图标/"i" 标签：

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

一样在 props 中传递组件或组件数组

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

然后在 IBox 中你写 { this.props.icons } 如果你传入它，它将呈现图标（或其他任何东西）..否则如果属性未定义则什么都不显示。

反应-将图标添加到 header 内部组件

react - add icons to header inside component

html

javascript

jsx

reactjs

redux