Javascript 反应：从导入的图像设置状态？

我确信我已经偏离了底线，但是我似乎无法解决这个问题。我已经导入了两个图像，当我的函数运行时，我想通过设置状态来交换它们。我似乎无法做到这一点，也不确定我遗漏了什么（我是新来的，有着用户体验设计师的背景）

这是我的代码：

import React from 'react';
import styled from 'styled-components';
import Moment from 'react-moment';
import faceanni from '../../../static/faceanni.png';
import facedarth from '../../../static/facedarth.png';
import {Row, Col} from 'react-flexbox-grid';

const StarTitle = styled.h1`
  color: white;
`

class Kylo extends React.Component {
  constructor() {
    super();
    this.state = {
      greetings: 'Dark Side',
      clickFor: 'Spanish',
      face: 'facedarth',
    }
  }

  handleClick() {
    if (this.state.greetings == 'Dark Side') {
      this.setState({greetings: 'Light Side'});
      this.setState({clickFor: 'English'});
      this.setState({face: {facedarth}})
    } else {
      this.setState({greetings: 'Dark Side'})
      this.setState({clickFor: 'Wookie'})
      this.setState({face: 'faceanni'})
    }
  }


  render() {
    return (
      <div className="wrap">
        <div style={{marginTop: '2em', marginBottom: '5em', width: '80%'}}>
          <Col xs={12} sm={12} md={12} lg={12}>
            <StarTitle>Coming soon!</StarTitle>
          </Col>
          <Col xs={12} sm={12} md={12} lg={12}>
            <Row center="md">
              <Col xs={12} sm={12} md={6} lg={6}>
                <p>{this.state.greetings}</p>
                <button onClick={this.handleClick.bind(this)}>click for {this.state.clickFor}!</button>
                <img src={this.state.face} />
              </Col>
            </Row>
          </Col>
      </div>
    </div>
    );
  }
}

export default Kylo;

从“React”导入React；
从“样式化组件”导入样式化；
从“反应力矩”导入力矩；
从“../../static/faceanni.png”导入faceanni；
从“../../static/facedarth.png”导入facedarth；
从'react flexbox grid'导入{Row，Col}；
const StarTitle=styled.h1`
颜色：白色；
`
类Kylo扩展了React.Component{
构造函数（）{
超级（）；
此.state={
问候：'黑暗面'，
点击“西班牙语”，
脸：“脸达斯”，
}
}
handleClick（）{
如果（this.state.greetings==‘黑暗面’）{
this.setState（{问候语：'lightside'}）；
this.setState（{clickFor:'English'}）；
this.setState（{face:{facedarth}}）
}否则{
this.setState（{问候语：'黑暗面'}）
this.setState（{clickFor:'Wookie'}）
this.setState（{face:'faceanni'}）
}
}
render（）{
返回(
马上就来！
{this.state.hellives}

点击{this.state.clickFor}！
);
}
}
出口违约基洛；

---

因此，使用“../../static/facedarth.png”中的

导入facedarth

我不确定如何将

{facedarth}

与状态一起使用。我甚至可能没有弄清楚（我希望是这样）。有人能告诉我哪里没有标记吗？

您可以将

设置状态

直接设置为导入的图像变量

class Kylo extends React.Component {
  constructor() {
    super();
    this.state = {
      greetings: 'Dark Side',
      clickFor: 'Spanish',
      face: facedarth,
    }
  }

  handleClick() {
    if (this.state.greetings == 'Dark Side') {
      this.setState({greetings: 'Light Side'});
      this.setState({clickFor: 'English'});
      this.setState({face: facedarth})
    } else {
      this.setState({greetings: 'Dark Side'})
      this.setState({clickFor: 'Wookie'})
      this.setState({face: faceanni})
    }
  }


  render() {
    return (
      <div className="wrap">
        <div style={{marginTop: '2em', marginBottom: '5em', width: '80%'}}>
          <Col xs={12} sm={12} md={12} lg={12}>
            <StarTitle>Coming soon!</StarTitle>
          </Col>
          <Col xs={12} sm={12} md={12} lg={12}>
            <Row center="md">
              <Col xs={12} sm={12} md={6} lg={6}>
                <p>{this.state.greetings}</p>
                <button onClick={this.handleClick.bind(this)}>click for {this.state.clickFor}!</button>
                <img src={this.state.face} />
              </Col>
            </Row>
          </Col>
      </div>
    </div>
    );
  }
}

Kylo类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 问候：'黑暗面'， 点击“西班牙语”， 脸：脸达斯， } } handleClick（）{ 如果（this.state.greetings==‘黑暗面’）{ this.setState（{问候语：'lightside'}）； this.setState（{clickFor:'English'}）； this.setState（{face:facedarth}） }否则{ this.setState（{问候语：'黑暗面'}） this.setState（{clickFor:'Wookie'}） this.setState（{face:faceanni}） } } render（）{ 返回( 马上就来！ {this.state.hellives}

点击{this.state.clickFor}！ ); } }

---

不要将facedarth放在引号中（“”）使用不带引号的facedarth和花括号shappy来帮助：）