javascript - React - 将图标添加到组件内的标题

Question

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

所以我想做的是将多个图标添加到 SalesChannels 页面的 IBox 标记内，而不使 IBox 组件依赖于它。

希望能帮到你。谢谢!

Answer 1

您可以像 children 一样在 props 中传递组件或组件数组

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

然后在 IBox 中编写 { this.props.icons } ，如果您传入它，它将呈现图标(或其他任何内容)。否则将不显示任何内容如果 prop 未定义。