反應：從導入的圖像setState？

Question

我確定我離基地很遠，但是我似乎無法解決這個問題。 我已經導入了兩個圖像，我想通過設置狀態來在運行函數時交換掉它們。 我似乎無法做到這一點，並且不確定自己缺少什么（我是來自UX設計者背景的新手）。

這是我的代碼：

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;

因此， import facedarth from '../../../static/facedarth.png'; 我不確定如何在狀態下使用{facedarth} 。 我什至沒有講清楚（我希望是）。 誰能告訴我我在哪里缺少商標？

Answer 1

您可以將setState直接設置為導入的圖像變量，如下所示：

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