尝试使用 state react es6 默认隐藏 <p> 标签

Question

我有以下静态视图：

import React from 'react';

export default class Champ extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.champ.file} />
        <p>Name: {this.props.champ.name } </p>
        <p>Role: { this.props.champ.role } </p>
        <p>Difficulty: { this.props.champ.diff } </p>
        <p>Price: { this.props.champ.price } </p>
      </div>
    )
  }
}

我想更改它，以便在加载页面时只有图像可见，并且当它们悬停在信息上时会淡入。

我想通过让所有包含信息的<p> 标签在页面打开时默认隐藏并使用状态来做到这一点。

我想我可以做一些事情，比如把它们变成一个常量

const x = <p>Name: {this.props.champ.name } </p>
    <p>Role: { this.props.champ.role } </p>
    <p>Difficulty: { this.props.champ.diff } </p>
    <p>Price: { this.props.champ.price } </p>


this.state = { x.style.visibilty = 'hidden'};

}

但我实际上不确定如何执行此操作。我现在才学习状态，以前从未使用过隐藏。谢谢。

Answer 1

State 应该表达状态，但不保存渲染的内容。因此，您只需要一个detailsVisible 标志或其他状态，您可以使用setState({ detailsVisible: true | false }) 切换onMouseEnter 和onMouseLeave，然后您可以使用this.state.detailsVisible 来渲染<p> 标签或不渲染。要将它们一起显示和隐藏，将它们放在包装元素或组件中并使用表达式切换它的可见性会很方便：

class Champ extends React.Component {
  state = { detailsVisible: false };
  handleMouseEnter = e => this.setState({ detailsVisible: true });
  handleMouseLeave = e => this.setState({ detailsVisible: false });
  render() {
    return (
      <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
        <img src={this.props.champ.file} />
        { this.state.detailsVisible && <ChampDetails champ={this.props.champ} /> }
      </div>
    )
  }
}

const ChampDetails = ({champ}) => (
  <div>
    <p>Name: { champ.name } </p>
    <p>Role: { champ.role } </p>
    <p>Difficulty: { champ.diff } </p>
    <p>Price: { champ.price } </p>
  </div>
);

^ 需要 class properties，否则将类属性分配（state、handleMouseEnter 和 handleMouseLeave）放在构造函数中。