ReactJS SyntaxError：意外的令牌

Question

我有这个 ReactJS 代码的 sn-p，直到我在 render 的顶部添加了更多 div 元素之后它才有效。其中有 3 个引导单选按钮，我打算将一些初始值链接到构造函数上的初始值，因此我只能从构造函数中更改它们。

class Body extends React.Component {
    constructor(props) {
       super(props);
       this.state = { 
           data : [],

           first_active: 'active',
           second_active: '',
           third_active: '',

           joke_id: 1,
           dadjoke_id: 1,
           tweet_id: 1,

           first_checked: 'checked',
           second_checked: '',
           third_checked: ''
        }
    }

    componentDidMount(){
     this.postdata()
    }

    postdata(){
        ...
    }

    render(){
       return( 
            <div>
              <div id="side-nav">
                <div className="btn-group btn-group-toggle" data-toggle="buttons">
                  <label className="btn btn-secondary {first_active}">
                    <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{joke_id}" {first_checked} onChange={() => alert('click1')} /> Joke
                  </label>
                  <label className="btn btn-secondary {second_active}">
                    <input type="radio" name="options" id="option2" autoComplete="off" value="DadJokes" ref_id="{dadjoke_id}" {second_checked}  onChange={() => alert('click2')} /> DadJokes
                  </label>
                  <label className="btn btn-secondary {third_active}">
                    <input type="radio" name="options" id="option3" autoComplete="off" value="Tweet" ref_id="{tweet_id}" {third_checked} onChange={() => alert('click3')} /> Tweet
                  </label>
                </div>
              </div>
                <div className="col-md-7 top-padding" align="center">
                      <span className="oi oi-reload"></span>
                    </div>
                {this.state.data.length == 0 && 
                   <div> No options available.</div>
                }
                {this.state.data.length > 0 && 
                  <div className="container top-padding" id="jokes">
                       {this.state.data.map(function(item,i){
                          return(
                                <div key={item['key']} className="card col-md-7">
                                    <div className="card-body">
                                        {item['text']} 
                                    <p><span className="badge badge-secondary">{item.name}</span></p>
                                    </div>
                                </div>
                          )
                       })}
                   </div>
                }
            </div>
         )
    }
}

启动时会抛出此语法错误

SyntaxError: http://35.196.142.180/static/js/react-script.js: Unexpected token (52:120)
  50 |                 <div className="btn-group btn-group-toggle" data-toggle="buttons">
  51 |                   <label className="btn btn-secondary {first_active}">
> 52 |                     <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{joke_id}" {first_checked} onChange={() => alert('click1')} /> Joke
     |                                                                                                                         ^
  53 |                   </label>
  54 |                   <label className="btn btn-secondary {second_active}">
  55 |                     <input type="radio" name="options" id="option2" autoComplete="off" value="DadJokes" ref_id="{dadjoke_id}" {second_checked}  onChange={() => alert('click2')} /> DadJokes

但它指向错误的位置在我看来很好。

这与渲染函数和它应该从构造函数中初始化的变量中获取的数据相关联。

更新

我使用了添加this.state. 进行检查的建议，它的工作原理是这样的checked={this.state.first_checked}

但是这个

 <label className=`btn btn-secondary ${this.state.first_active}`>

抛出此错误

SyntaxError: http://35.196.142.180/static/js/react-script.js: JSX value should be either an expression or a quoted JSX text (51:35)
  49 |               <div id="side-nav">
  50 |                 <div className="btn-group btn-group-toggle" data-toggle="buttons">
> 51 |                   <label className=`btn btn-secondary ${this.state.first_active}`>
     |                                    ^
  52 |                     <input type="radio" name="options" id="option1" autoComplete="off" value="Joke" ref_id="{this.state.joke_id}" checked={this.state.first_checked} onChange={() => alert('click1')} /> Joke
  53 |                   </label>
  54 |                   <label className="btn btn-secondary {this.state.second_active}">

Answer 1

试试这个

<label className={`btn btn-secondary ${this.state.first_active}`}>

Answer 2

试试这个：

this.state.first_checked