Question

有一些通用功能可以提取到名为getQuote()的单独功能中，但是，尝试使用此功能时，react会产生错误。任何帮助将不胜感激。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';

/*
* A simple React component
*/
class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: '',
      author:''
    };
    this.handleClick = this.handleClick.bind(this)
    this.getQuote = this.getQuote.bind(this)
  }

  getQuote(){

  }

  componentDidMount() {
    let quotes = [['this is a quote', 'somebody1'], ['this is another quote', 'somebody2'], ['this is third', 'somebody3']];
    let random = Math.floor((Math.random() * 3)); 
    let quote = quotes[random][0];
    let author = quotes[random][1];
    this.setState({quote: quote});
    this.setState({author: author});
  }

  handleClick() {
    let quotes = [['this is a quote', 'somebody1'], ['this is another quote', 'somebody2'], ['this is third', 'somebody3']];
    let random = Math.floor((Math.random() * 3));
    let quote = quotes[random][0];
    let author = quotes[random][1];
    this.setState({quote: quote});
    this.setState({author: author});
  }

  render() {
    return (
      <div>
      <h1 id="title">Random Quote Machine</h1>
      <span id="text"><p>{this.state.quote}</p></span>
      <span id="author">{this.state.author}</span>
      <hr style={{"color": "gold"}}/>
      <button id="new-quote" onClick={this.handleClick}>New quote</button>
      <a id="tweet-quote" title="Tweet this quote!" href="twitter.com/intent/tweet" target="_blank">
      <button>Tweet</button></a>
      <a id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
      <button>Tumblr</button></a>
      </div>
    );
  }
};

/*
* Render the above component into the div#app
*/
ReactDOM.render(<DisplayMessages />, document.getElementById("app"));

index.html：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Random Quote Machine</title>
  <style media="screen">

  html {
    background-color: hsl(0, 100%, 28%);
    color: gold;
  }

  body {
    text-align: center;
  }

  #quote-box {
    width: 100%;
    height: auto;
    max-width: 945px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
</style>
</head>
<body>
  <main id="main">
    <div id="quote-box">
      <div id="app"></app>
        <a class="button" id="tweet-quote" title="Tweet this quote!" href="twitter.com/intent/tweet" target="_blank">
          <button>Tweet</button></a>
          <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank">
            <button>Tumblr</button></a>
          </div>
        </main>
      </body>
      </html>

Answer 1

这应该有效：

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: "",
      author: ""
    };
    this.handleClick = this.handleClick.bind(this);
    this.getQuote = this.getQuote.bind(this);
  }

  getQuote() {
    let quotes = [
      ["this is a quote", "somebody1"],
      ["this is another quote", "somebody2"],
      ["this is third", "somebody3"]
    ];
    let random = Math.floor(Math.random() * 3);
    let quote = quotes[random][0];
    let author = quotes[random][1];
    this.setState({ quote: quote });
    this.setState({ author: author });
  }

  componentDidMount() {
      this.getQuote();
  }

  handleClick() {
    this.getQuote();
  }

  render() {
    return (
      <div>
        <h1 id="title">Random Quote Machine</h1>
        <span id="text">
          <p>{this.state.quote}</p>
        </span>
        <span id="author">{this.state.author}</span>
        <hr style={{ color: "gold" }} />
        <button id="new-quote" onClick={this.handleClick}>
          New quote
        </button>
        <a
          id="tweet-quote"
          title="Tweet this quote!"
          href="twitter.com/intent/tweet"
          target="_blank"
        >
          <button>Tweet</button>
        </a>
        <a
          href="/"
          id="tumblr-quote"
          title="Post this quote on tumblr!"
          target="_blank"
        >
          <button>Tumblr</button>
        </a>
      </div>
    );
  }
}

沙盒：https://codesandbox.io/s/runtime-brook-ntc17?file=/src/App.js

反应：如何将常用功能提取到单独的功能中？

1 个答案: