Javascript 在react js中切换字体awesome的图标

我不熟悉react js。我有一个组件，其中我显示了一个图标

import React, { Fragment } from 'react';

const Sorting = (props) => {
  return (
    <span className="d-inline-flex">
     <i className="fa fa-angle-down" aria-hidden="true" onClick={() => props.sortData(props.type, 'ascending')}></i>
  )
}
export default Sorting;

有没有办法做到这一点？

---

谢谢。

各个组件的状态应该不同

//父组件

import React from "react";
import SortDataFunc from "./SortDataFunc";

class SortData extends React.Component {
  constructor() {
    super();
    this.state = { toggle: [true, true] };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(index) {
    this.setState(state => {
      return (state.toggle[index] = !state.toggle[index]);
    });
  }
  render() {
    return (
      <div>
        <SortDataFunc
          id="0"
          handleClick={this.handleClick}
          toggled={this.state.toggle[0]}
        />
        <SortDataFunc
          id="1"
          handleClick={this.handleClick}
          toggled={this.state.toggle[1]}
        />
      </div>
    );
  }
}

export default SortData;

import React from "react";

const SortDataFunc = props => {
  const clickHandler = () => {
    props.handleClick(props.id);
  };
  return (
    <div>
      <i
        className={`fa ${props.toggled ? "fa-angle-down" : "fa-angle-up"}`}
        aria-hidden="true"
        onClick={clickHandler}
      />
    </div>
  );
};
export default SortDataFunc;

从“React”导入React；
从“/SortDataFunc”导入SortDataFunc；
类SortData扩展了React.Component{
构造函数（）{
超级（）；
this.state={toggle:[true，true]}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（索引）{
this.setState（state=>{
返回（state.toggle[index]=！state.toggle[index]）；
});
}
render（）{
返回(
);
}
}
导出默认排序数据；

//子组件

import React from "react";
import SortDataFunc from "./SortDataFunc";

class SortData extends React.Component {
  constructor() {
    super();
    this.state = { toggle: [true, true] };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(index) {
    this.setState(state => {
      return (state.toggle[index] = !state.toggle[index]);
    });
  }
  render() {
    return (
      <div>
        <SortDataFunc
          id="0"
          handleClick={this.handleClick}
          toggled={this.state.toggle[0]}
        />
        <SortDataFunc
          id="1"
          handleClick={this.handleClick}
          toggled={this.state.toggle[1]}
        />
      </div>
    );
  }
}

export default SortData;

import React from "react";

const SortDataFunc = props => {
  const clickHandler = () => {
    props.handleClick(props.id);
  };
  return (
    <div>
      <i
        className={`fa ${props.toggled ? "fa-angle-down" : "fa-angle-up"}`}
        aria-hidden="true"
        onClick={clickHandler}
      />
    </div>
  );
};
export default SortDataFunc;

从“React”导入React；
const SortDataFunc=props=>{
常量clickHandler=（）=>{
props.handleClick（props.id）；
};
返回(
);
};
导出默认的SortDataFunc；

排序

组件有自己的状态

排序

类排序扩展了React.Componet{
建造师（道具）{
超级（道具）
this.state={sort:'singressing'}
this.clickHandler=this.clickHandler.bind（this）；
}
clickHandler（）{
让sort=this.state.sort==‘升序’？‘降序’：‘升序’；
这是我的国家({
分类
})
this.props.sortData（this.props.type，sort）；
}
render（）{
返回(
)
}
}

嘿，你能检查一下我试过什么吗。我已经在回答中添加了它，这是为了解决这个问题，但唯一的问题是，我在5个标题上有这个图标。所以，我为其中一个做了这个，然后其他五个也在切换。嘿，我也用同样的方法做了，唯一的一点是，我为每一列做了5次。这就是我面临的问题。@ganesh我编辑过。虽然我写了5次来理解，但你可以使用

map

。实际上，索引是我必须做的事情use@ganesh隐马尔可夫模型。。不，我认为最好让

排序组件处于自己的状态。。因为我只有一个排序组件。像wordpress一样的无限长的行最终引入了react，是的