Question

根据点击的链接，我想更新MapImage组件中的img src

import React from 'react'
import NavLink from './NavLink'

var MapImage = React.createClass({
  render: function() {
    return <img src={'./img/' + this.props.img + '.png'} />
  }
});

export default React.createClass({
    getInitialState: function () {
    return { img: '1' }
  },

  loadImage: function () {
    this.setState({
        img: this.props.img
    });
  },  
  render() {
    return (
      <div>
        <h2>Maps</h2>
        <ul>
          <li><NavLink onClick={this.loadImage} to="/maps/firstfloor" img='1'>1st Floor</NavLink></li>
          <li><NavLink onClick={this.loadImage} to="/maps/secondfloor" img='2'>2nd Floor</NavLink></li>
          <li><NavLink onClick={this.loadImage} to="/maps/thirdfloor" img='3' >3rd Floor</NavLink></li>
        </ul>
        {this.props.children}
        <MapImage img={this.state.img} />
      </div>     
    )
  }
})

图片src更新为./img/undefined.png

Answer 1

当你在做道具时，你没有道具中的那个图像值：

this.setState({
    img: this.props.img
});

尝试将参数传递给loadImage函数，并在setState中使用它：

// in JSX
onClick={ function () { this.loadImage(1); } }

// function
loadImage: function (img) {
    this.setState({
        img: img
    });
}

对于每个NavLink图像。

一般来说，我建议有一个数组并迭代它，如：

var images = [{
   value: 'firstfloor',
   text: '1st Floor' 
}, 
{ ... // other objects }]

然后像这样迭代（或根据你的逻辑改变值）：

{ 
   images.map((image, index) => {
      return (
         <li>
             <NavLink 
                   onClick={ function () { this.loadImage(index); } } 
                   to={ '/maps/' + image.value }
                   img={ index }>
                 { image.text }
             </NavLink>
         </li>
      );
   });
}

将Prop传递给子组件onClick

1 个答案: