Question

我正在做一个学校项目。项目是建立一个随机报价生成器，然后通过Twitter和Facebook共享随机报价。我用React构建了随机报价生成器。生成随机报价和作者，然后通过ReactDOM.render（）方法将其显示在网页上。如果我只是共享链接，则单击时将生成不同的随机报价。寻找一种共享当前报价和作者的方法。

    const quotes=["Don't cry because it's over, smile because it happened.","I'm selfish, 
    impatient and a little insecure. I make mistakes, I am out of control and at times 
    hard to handle. But if you can't handle me at my worst, then you sure as hell don't 
    deserve me at my best.","Be yourself; everyone else is already taken.","Two things 
    are infinite: the universe and human stupidity; and I'm not sure about the 
    universe.","So many books, so little time.","Be who you are and say what you feel, 
    because those who mind don't matter, and those who matter don't mind.","A room 
    without books is like a body without a soul.","You've gotta dance like there's nobody 
    watching, Love like you'll never be hurt, Sing like there's nobody listening, And 
    live like it's heaven on earth.","You know you're in love when you can't fall asleep 
    because reality is finally better than your dreams.","You only live once, but if you 
    do it right, once is enough.","Be the change that you wish to see in the world.","In 
    three words I can sum up everything I've learned about life: it goes on.","If you 
    want to know what a man's like, take a good look at how he treats his inferiors, not 
    his equals.","Don’t walk in front of me… I may not follow. Don’t walk behind me… I 
    may not lead. Walk beside me… just be my friend","Friendship ... is born at the 
    moment when one man says to another What! You too? I thought that no one but myself . 
    . .","No one can make you feel inferior without your consent.","If you tell the 
    truth, you don't have to remember anything.","A friend is someone who knows all about 
    you and still loves you.","I've learned that people will forget what you said, people 
    will forget what you did, but people will never forget how you made them 
    feel.","Always forgive your enemies; nothing annoys them so much.","To live is the 
    rarest thing in the world. Most people exist, that is all.","Live as if you were to 
    die tomorrow. Learn as if you were to live forever.","Darkness cannot drive out 
    darkness: only light can do that. Hate cannot drive out hate: only love can do 
    that.","I am so clever that sometimes I don't understand a single word of what I am 
    saying.","Without music, life would be a mistake.","To be yourself in a world that is 
    constantly trying to make you something else is the greatest accomplishment.","Here's 
    to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the 
    square holes. The ones who see things differently. They're not fond of rules. And 
    they have no respect for the status quo. You can quote them, disagree with them, 
    glorify or vilify them. About the only thing you can't do is ignore them. Because 
    they change things. They push the human race forward. And while some may see them as 
    the crazy ones, we see genius. Because the people who are crazy enough to think they 
    can change the world, are the ones who do.","We accept the love we think we 
    deserve.","Insanity is doing the same thing, over and over again, but expecting 
    different results.","I believe that everything happens for a reason. People change so 
    that you can learn to let go, things go wrong so that you appreciate them when 
    they're right, you believe lies so you eventually learn to trust no one but yourself, 
    and sometimes good things fall apart so better things can fall together."]
    const authors=["Dr. Seuss","Marilyn Monroe","Oscar Wilde","Albert Einstein","Frank 
    Zappa","Bernard M. Baruch","Marcus Tullius Cicero","William W. Purkey","Dr. 
    Seuss","Mae West","Mahatma Gandhi","Robert Frost","J.K. Rowling","Albert Camus","C.S. 
    Lewis","Eleanor Roosevelt","Mark Twain","Elbert Hubbard","Maya Angelou","Oscar 
    Wilde","Oscar Wilde","Mahatma Gandhi","Martin Luther King Jr.","Oscar 
    Wilde","Friedrich Nietzsche","Ralph Waldo Emerson","Rob Siltanen","Stephen 
    Chbosky","Narcotics Anonymous","Marilyn Monroe"]
    let random=Math.floor(Math.random()*(quotes.length));
    class GetNewQuote extends React.Component{
     constructor(props) {
    super(props);
       this.handleClick=this.handleClick.bind(this)
    } 
  handleClick(){
    random=Math.floor(Math.random()*(quotes.length))
   ReactDOM.render(quotes[random],document.getElementById('text'))
  ReactDOM.render(authors[random],document.getElementById('author'))

  }
  render(){
    return <button onClick={this.handleClick}class="btn btn-primary"id="new-quote"> 
   <h6>Get New Quote</h6></button>; 

  }
   } 
    ReactDOM.render(quotes[random],document.getElementById('text'));
    ReactDOM.render(authors[random],document.getElementById('author'))
    ReactDOM.render(<GetNewQuote />,document.getElementById('new-quote'))

Answer 1

没有代码，我无法为您提供解决问题的特定代码段，但我认为您是通过API或项目中的数组/对象获取报价的。

现在，当您说每次共享链接时都更改了报价时，我想像您的整个引用代码都将再次运行，从而呈现新的报价。

您需要以稳定且一致的方式保存报价，以便在Facebook / Twitter分享上保持相同。在这种情况下，是由后端（例如数据库）来完成这项工作，以使其变为静态并与您的随机报价生成逻辑分离。

ReactJS只是一个前端解决方案。这意味着它仅在浏览器中运行。现在，它可以连接到任何类型的后端，但这意味着您需要单独处理。

步骤如下：

执行React App，从数组/后端等中检索随机报价，并在前端界面中将其显示给用户。
如果用户喜欢报价，则他/她单击“共享”按钮。
您的React App必须采用存储在状态（我认为是）中的报价，并将其发送到您的后端。
您的后端存储报价，并为此特定记录返回指向React的链接。
React在Facebook / twitter中共享此链接。
您的后端必须能够根据之前发送给React的特定链接（共享的链接）生成与Facebook / Twitter共享兼容的必要HTML
现在，当Facebook / Twitter在其应用程序中呈现该共享链接时，其漫游器将通过该链接进入您的后端，而您的后端必须生成包含该特定报价的HTML。

更新：

对于临时后端，您可以使用http://myjson.com/

它使您能够以JSON格式发布数据，并且每当您获取数据时，都会使用一个包含数据的唯一URL进行响应。

以下从myjson.com示例中获取和修改的代码会将obj POST到myjson.com，并将检索并记录以管理一个唯一URL，该URL将根据请求为您提供数据。

var obj = {
    "key": "value",
    "key2": "value2"
};

var data = JSON.stringify(obj);

    $.ajax({
        url: "https://api.myjson.com/bins",
        type: "POST",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            var json = JSON.stringify(data);
            console.log(json);
        }
    });

以下从myjson.com示例中获取和修改的代码将获取您提供的URL的数据并将其记录到控制台。

    $.get("hereComsAURLToMyJson.comWhichYouPreviouslyGotWhenYouPostedYourData", function (data, textStatus, jqXHR) {
        var json = JSON.stringify(data);
        console.log(json);
    });

希望如此。

有没有办法在Tweet / FB共享中包含字符串变量？

1 个答案: