英文:
Refactor Component to FunctionComponent with conditional style (onMouseEnter/Leave)
问题
我进入了React世界并完成了教程。我们最终得到了一个FunctionComponent：
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
我的结果略有不同，我试图解构props以将组件特定的props与DOM属性分离：
function Square({value, ...domProps}) {
return (
<button
className="square"
{...domProps}
>
{value}
</button>
);
}
父组件是：
class Board extends React.PureComponent {
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
我想要做的是在鼠标悬停在Square元素上时添加背景颜色。因此，我决定添加mouseEnter和mouseLeave的处理程序，但不知道接下来该怎么做。
所以我将我的FunctionComponent更改为了Component：
class Square extends React.PureComponent{
constructor(props) {
super(props);
const { value, ...platformProps } = props;
this.state = {
isHovered: false,
platformProps: platformProps,
};
}
render() {
return (
<button
className="square"
{...this.state.platformProps}
onMouseEnter={() => this.setState({isHovered: true})}
onMouseLeave={() => this.setState({isHovered: false})}
style={this.state.isHovered ? { backgroundColor: Color('indigo').lighten(0.5) } : {}}
>
{this.props.value}
</button>
);
}
}
这个做法虽然有效，但不够优雅，而且我不想在Square组件中处理条件样式。我只想Square成为一个我可以重复使用的低级组件。我错过了什么？
英文:
So I'm entering into React world and completed the tutorial. We end up with a FunctionComponent :
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
My result is slightly different, I tried to deconstruct props to separate component-specific props from DOM attributes :
function Square({value, ...domProps}) {
return (
<button
className="square"
{...domProps}
>
{value}
</button>
);
}
The parent component is :
class Board extends React.PureComponent {
renderSquare(i) {
return (
<Square
value = {this.props.squares[i]}
onClick = {() => this.props.onClick(i)}
/>
);
}
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
What I wanted to do is add a background-color on Square element when I hover it. So I decided to add handlers for mouseEnter and mouseLeave, but I had no idea what to do then.
So I changed my FunctionComponent to a Component :
class Square extends React.PureComponent{
constructor(props) {
super(props);
const { value, ...platformProps } = props;
this.state = {
isHovered: false,
platformProps: platformProps,
};
}
render() {
return (
<button
className="square"
{...this.state.platformProps}
onMouseEnter={() => this.setState({isHovered: true})}
onMouseLeave={() => this.setState({isHovered: false})}
style={this.state.isHovered ? { backgroundColor: Color('indigo').lighten(0.5) } : {}}
>
{this.props.value}
</button>
);
}
}
This is working but it's ugly and I didn't want to handle conditional styling into Square component. I only wanted Square to be dumb low-level component that I can reuse. What am I missing ?
答案1
得分: 1
以下是您要翻译的内容：
"这是使用 useState 钩子的等效函数组件。
const Square = ({value, ...platformProps}) => {
const [isHovered, setHovered] = useState();
return (
<button
className="square"
{...platformProps}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={
isHovered
? { backgroundColor: Color("indigo").lighten(0.5) }
: {}
}
>
{value}
</button>
);
};
```"
<details>
<summary>英文:</summary>
That's the equivalent function component using `useState` hook.
```jsx
const Square = ({value, ...platformProps}) => {
const [isHovered, setHovered] = useState();
return (
<button
className="square"
{...platformProps}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={
isHovered
? { backgroundColor: Color("indigo").lighten(0.5) }
: {}
}
>
{value}
</button>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论