分享
三行代码  ›  专栏  ›  技术社区  ›  65535

反应:如何将公共功能提取到单独的函数中?

  •  0
  • 65535  · 技术社区  · 1 周前

    有一些通用功能可以提取到一个名为 getQuote()

    索引.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"));
    

    索引.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>
    
    
    1 回复  |  直到 1 周前
        1
  •  2
  •   Axnyff    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