私は現在、反応の問題を解決しようとしています。
私は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ページにマルチアイコンを追加します。
お手伝いができたら幸いです。ありがとう!
素晴らしい、ありがとう、それは働いた! :) – PatrickGoethe