Javascript 如何在react中创建readmore按钮？

我正在为过长的文本区域制作readmore按钮。这给了我一个错误

需要赋值或函数调用，而看到的是表达式

这是密码

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()}

readMore=（）=>{
var showResult=false；
如果（showResult==false）{
返回
欢迎来到挥鞭伤phyx的1级。这个phyx是为那些因车祸而遭受轻微挥鞭伤的人设计的，他们的医疗专业人员已经批准他们开始身体康复。。
{showResult=true}className=“futura-16-300”>阅读更多
}else if（showResult==true）{
如果您对自己的诊断不确定，请随时咨询您的医生或在网上与我们的一位医生预约phyxable咨询。在经历了一次轻微的小车祸后，您的颈部肌肉会反应性地绷紧。您的姿势肌肉仍然因碰撞而受到冲击，可怕事件的压力会使这些肌肉收缩更紧一点。不要害怕，如果做得好，这个phyx会让你放松，同时教你如何对抗疼痛和僵硬。像大多数phyx解决方案一样，这个phyx有3个级别。我们从一个非常简单和放松的级别1开始，让肌肉平静下来。级别2改善你的姿势，然后r可以减轻疼痛和紧绷感。如果你成功了，第3级的重点是让你的颈部和背部肌肉恢复到事故发生前的水平，甚至比事故发生前更强壮。这项phyx应该每天进行一次。每一级的每一次训练都将逐渐变得更具挑战性。如果你愿意，请随时参加特定的训练感觉太有挑战性了，或者如果在训练后一天疼痛程度超过中等程度。但是如果你准备好迎接挑战，我们的大多数用户都会在一周内完成1级。
{showResult=false}className=“futura-16-300”>读得更少


} 
}
{this.readMore（）}

以下是解决您问题的有效方法-

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

• 您的问题：

  需要赋值或函数调用，而看到的是表达式，这是因为在else条件下，没有return语句。有一个悬空的
  ，从未分配给变量，也没有返回

• 此外，showResult应在状态中用于管理

  多读

  和

  少读

  功能

---

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

我不知道为什么答案是

-1

？不管是谁给的，你能解释一下答案有什么不对吗？阅读更多现在正在工作，但是它阻止了我的其他代码工作。我认为这是因为状态刷新。您能否帮助我在不触及状态的情况下实现此功能。如果不希望组件中的状态刷新，您可能可以将整个“阅读更多”部分转移到其他组件，以便新组件中的任何状态更改都不会影响/刷新父组件。