javascript - 默认情况下尝试使用 state react es6 隐藏 标签

Question

我有以下静态 View :

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'};

但实际上我不确定该怎么做。我现在才学习状态，以前从未使用过 hidden。谢谢。

Answer 1

State 应该表达状态但不保存呈现的内容。所以你只需要一个 detailsVisible标志或处于您切换状态的东西 onMouseEnter和 onMouseLeave使用 setState({ detailsVisible: true | false }) , 那么你可以使用 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 )放在构造函数中。