Question

我确定我离开了基地但是我似乎无法解决这个问题。当我通过设置状态运行我的函数时，我导入了两个想要换出的图像。我似乎无法做到这一点，并且不确定我所缺少的是什么（我是新来的，来自用户体验设计师的背景）。

这是我的代码：

#!/bin/sh

url_encoder()
{                                                                                                                                                                                                              
  awk -v url="$1" -v ORS= 'BEGIN {
     # Create lookup table that maps characters to their code points.
    for(n=32;n<=127;n++) ord[sprintf("%c",n)]=n
     # Process characters one by one, either passing them through, if they
     # need no encoding, or converting them to their %-prefixed hex equivalent.
    for(i=1;i<=length(url);++i) {
      char = substr(url, i, 1) 
      if (char !~ "[-_.~/a-zA-Z0-9]") char = sprintf("%%%x", ord[char])
      print char
    }
    printf "\n"
  }'
}

因此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';与州一起使用。我甚至可能没有明确的意义（我希望我是）。谁能告诉我我在哪里错过了这个标记？

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

React：从导入的图像中设置setState？

1 个答案: