Question

我正在尝试创建一个组件，当有人将鼠标悬停在它上面并让img出现但我不知道我的代码有什么问题时会发生变化，我在控制台中没有收到任何错误但是img未显示。这是我的代码：

var React = require('react');
var ReactDOM = require('react-dom');

var Troll = {
  title: 'Why so serious?',
  src: '../imagenes/troll.png'
};

var Common = React.createClass({
  handleHover: function() {
    return (
    <img src={Troll.src} id='cara'/>
    );
  },
  render: function () {
    return (
    <div onMouseEnter={this.handleHover}>
      <h2>{Troll.title}</h2>
    </div>
    );
  }
});

ReactDOM.render(
    <Common />,
    document.getElementById('app')
);

Answer 1

您只能在渲染函数中返回JSX，但是您正在尝试在事件中执行此操作。您的handleHover方法应该只包含替换正在呈现的标记的逻辑，而不是标记本身。

Answer 2

函数handleHover不能返回任何内容。它只需要显示/隐藏图像。

检查此代码：

class Avatar {
    render () {
    return (
        <div 
          className="avatar"
          onMouseOver={this.showImage.bind(this)}
          onMouseLeave={this.hideImage.bind(this)}>
        <figure ref="image">
            <img src={this.props.img}/>
        </figure>
        <p>John Doe</p>
      </div>
    )
  }

  showImage () {
    this.refs.image.classList.add('visible');
  }

  hideImage () {
    this.refs.image.classList.remove('visible');
  }
}

const node = document.getElementById('comp');
ReactDOM.render(
  <Avatar 
    img="http://www.material-ui.com/images/uxceo-128.jpg"
  />,
  node
);

我们只是绑定mouseover和mouseleave事件的方法。第一种方法只显示添加CSS类的图像，另一种方法删除此类以隐藏它。

点击here以查看此代码正在运行。

Answer 3

如其他答案中所述，您无需返回任何内容。尝试使用React状态来解决这个问题：

var React = require('react');
var ReactDOM = require('react-dom');

var Troll = {
  title: 'Why so serious?',
  src: '../imagenes/troll.png'
};

var Common = React.createClass({
  getInitialState: function() {
    return {
      showTrollImage: false
    }
  },

  handleHover: function() {
    this.setState({ showTrollImage: true });
  },

  render: function () {
    var trollImage = null;

    if (this.state.showTrollImage) {
      trollImage = <div><img src={Troll.src} id="cara" /></div>;
    }

    return (
    <div onMouseEnter={this.handleHover}>
      <h2>{Troll.title}</h2>
      {trollImage}
    </div>
    );
  }
});

ReactDOM.render(
  <Common />,
  document.getElementById('app')
);

顺便说一下，尝试更新您的代码以使用ES6。 See here了解现代React代码的示例。我将转换您的Common组件：

class Common extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showTrollImage: false,
    };
  }

  handleHover = () => {
    this.setState({ showTrollImage: true });
  };

  render() {
    let trollImage = null;

    if (this.state.showTrollImage) {
      trollImage = <div><img src={Troll.src} id="cara" /></div>;
    }

    return (
    <div onMouseEnter={this.handleHover}>
      <h2>{Troll.title}</h2>
      {trollImage}
    </div>
    );
  }
});

请注意以下语法：

handleHover = () => { };

是Babel class property transformation，您需要在项目中安装Babel stage 2支持才能使用它。

如何用反应js中的hove创建一个组件？

3 个答案: