javascript - 如何在 react 中制作阅读更多按钮？

Question

我正在为太长的文本区域制作一个阅读更多按钮。它给我一个错误 期待一个赋值或函数调用，却看到了一个表达式

这是代码

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特色。

希望解决方案可以通过 codesandbox 链接进行解释。我添加了一个状态处理程序，还添加了 return 语句来修复它。