Javascript 单击时将道具传递给子组件

根据单击的链接，我想更新

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

从“React”导入React
从“/NavLink”导入NavLink
var MapImage=React.createClass({
render:function（）{
返回
}
});
导出默认的React.createClass({
getInitialState:函数（）{
返回{img:'1'}
},
loadImage:函数（）{
这是我的国家({
img:this.props.img
});
},  
render（）{
返回(
地图

一楼
二楼
三楼

{this.props.children}
)
}
})

---

图像src更新为

/img/undefined.png

当您执行以下操作时，道具中没有该图像值：

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

尝试将参数传递给

loadImage

函数，并在

setState

中使用它：

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

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

对于每个导航链接图像

通常，我建议使用一个数组并对其进行迭代，如：

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

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

{
images.map（（图像，索引）=>{
返回(

{image.text}

);
});
}

当您执行以下操作时，道具中没有该图像值：

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

尝试将参数传递给

loadImage

函数，并在

setState

中使用它：

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

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

对于每个导航链接图像

通常，我建议使用一个数组并对其进行迭代，如：

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

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

{
images.map（（图像，索引）=>{
返回(

{image.text}

);
});
}

您的问题在哪里？具体问题是什么？您正在将状态正确地传递给

MapImage

。您是否收到错误？抱歉--img值未定义。是否引发此错误？是否在

loadImage

功能中<此函数中的code>this.props.img假定道具是从另一个父组件（或状态容器，如果您正在使用一个）传递到此组件的。我假设您正试图从

NavLink

组件

onClick

访问

img={/*Number*/}

？如果是这样，您必须将其绑定或传递到

loadImage

。没有引发错误，src只是设置为“img/undefined.png”。有趣的是，在第二次单击时，确实设置了参数，但是映像路径现在不是（根目录），您的问题在哪里？具体问题是什么？您正在将状态正确地传递给

MapImage

。您是否收到错误？抱歉--img值未定义。是否引发此错误？是否在

loadImage

功能中<此函数中的code>this.props.img假定道具是从另一个父组件（或状态容器，如果您正在使用一个）传递到此组件的。我假设您正试图从

NavLink

组件

onClick

访问

img={/*Number*/}

？如果是这样，您必须将其绑定或传递到

loadImage

。没有引发错误，src只是设置为“img/undefined.png”。有趣的是，在第二次单击时，确实设置了参数，但是映像路径现在不是（根目录）