javascript - onClick 将 Prop 传递给子组件

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

当你这样做时， Prop 中没有该图像值:

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