質問: "active"; } return ( <li key={index} classname={activeclass} onclick={self.clicked.bind(self, index)} > <a href="#" classname={data.icon}> {data.name} </a> </li> ); })} </ul> </div> ); } }); reactdom.render(<accountmainmenu />, document.getelementbyid("app-container"));
回答: facebookのtodotextinput.jsの例を使用して render() { return ( <input classname={ classnames({ edit: this.props.editing, 'new-todo': this.props.newtodo })} type="text" placeholder={this.props.placeholder} autofocus="true" value={this.state.text} onblur={this.handleblur} onchange={this.handlechange} onkeydown={this.handlesubmit} /> ) } classnames を通常のvanilla jsコードに置き換えると、次のようになります。render() { return ( <input classname={` ${this.props.editing ? 'edit' : ''} ${this.props.newtodo ? 'new-todo' : ''} `} type="text" placeholder={this.props.placeholder} autofocus="true" value={this.state.text} onblur={this.handleblur} onchange={this.handlechange} onkeydown={this.handlesubmit} /> ) }