如何使readmore按钮做出反应？

Question

我正在为一个太长的文本区域设置一个readmore按钮。它给我一个错误expected an assignment or function call and instead saw an expression

这里是代码

readMore = () => {
   var showResult = false; 
   if (showResult === false) {
      return  <div className = "futura-16-300" style = {{textAlign : "left"}}>
      Welcome to level 1 of the whiplash phyx. This phyx is made for those who have suffered from a minor whiplash from a car accident and have been cleared by their medical professional to start physical rehab..
      <a onClick={() => {showResult = true}} className="futura-16-300">Read more</a> 
      </div>
    } else if (showResult === true) {
      <div className="futura-16-300" style = {{textAlign : "left"}}>
      If you are unsure about your diagnosis, feel free to consult your doctor or book a phyxable consultation with one of our practitioners online. After suffering from a minor fender bender, your neck muscles become reactively tight. Your posture muscles are still in shock from the collision, and the stress of the awful event will make those muscles even tighter. Fear not, if done properly, this phyx will provide you with relief, while teaching you how to combat pain and stiffness from coming back. Like most of the phyxable solutions, there are 3 levels to this phyx. We start off with a very simple and relaxing Level 1 to get the muscles to calm down. Level two improves your posture and further diminishes the pain and tightness. If you are successful, level 3 focuses on getting your neck and mid-back muscles back to and even stronger than what they were prior to the accident. This phyx should be performed once a day. Each session of each level will progressively become more challenging. Feel free to stay at a particular session if you felt it was too challenging, or if there is more than a moderate amount of soreness a day after the session. But if you are up for the challenge, most of our users finish level 1 within one week.
      <a onClick={() => {showResult = false}} className="futura-16-300 ">Read less</a> 
      <br/>
      </div>
      } 
  }
{this.readMore()}

Answer 1

这是您的问题的有效解决方案-

https://codesandbox.io/s/react-example-kouyx

您的代码段存在多个问题。

• 您的问题：expected an assignment or function call and instead saw an expression，是因为在else条件下，没有return语句。有一个悬空的<div>，它从未分配给变量，也没有返回。
• 同样，在状态下也应使用showResult来管理Read More和Read Less功能。

希望该解决方案通过codeandbox链接进行说明。我添加了一个状态处理程序，还返回了一个语句来修复它。