Как заставить кнопку readmore реагировать? - PullRequest
0 голосов
/ 05 октября 2019

Я делаю кнопку 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()}

1 Ответ

1 голос
/ 05 октября 2019

Вот рабочее решение вашей проблемы -

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.

Надеюсь, что решение является объяснительным через ссылку кодов и ящиков. Я добавил обработчик состояния, а также оператор return, чтобы исправить это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...