如何在React中改变组件图标的外观?

Question

我有一个组件按钮和按钮内部，我有一个组件图标，我试图通过useState，但它不影响在父组件的所有状态。我有一个主组件头，我有标题和组件图标，我不会改变取决于哪个按钮将被点击。例如，如果我点击带有home图标的按钮-如果云将更改为cloud，则下一个Header标题图标将更改为home。

Header.js

import React from 'react';
import Button from 'components/Button';
const Header = (props) => {
return(
<div>
<h4 className="title">
<Icon name={props.titleIcon}/>
Title
</h4>
<div>
);
};

Button.js

import React,{useState} from 'react';
import { Button } from 'semantic-ui-react';
import { Icon } from 'semantic-ui-react';

const Button = (props) => {
const [icon, setIcon] = useState('home')

const handleClick = ()
=> {
setIcon(props.titleIcon = props.icon)
};
return(
<div>
<Button>
<a href={props.link} target="_blank">
<Icon name={props.icon}/>
{props.name}
</a>
</Button>
</div>
);

};

我怎样才能实现这种改变图标的效果?

的问候

Answer 1

这个有很多错误:

1. 你实际上没有使用handleClick函数
2. setIcon函数参数被用作赋值。未使用实际值

正确的代码应该是这样的:

import React,{useState} from 'react';
import { Button } from 'semantic-ui-react';
import { Icon } from 'semantic-ui-react';
const Button = ({titleIcon, name, link}) => {
const [icon, setIcon] = useState('home')
const handleClick = () => {
setIcon(titleIcon)
};
return(
<div>
<Button onClick={handleClick}>
<a href={link} target="_blank">
<Icon name={icon}/>
{name}
</a>
</Button>
</div>
);
};