我如何注释掉定义到 React 组件的 return() 方法中的某些 HTML 代码？

Question

我是 ReactJS 的新手，我正面临这个问题：如何注释掉 render() 方法中定义的一些 HTML 代码？

例如我有一个组件是这样的：

import React, {Component} from 'react';

class SearchBar extends Component {

    constructor(props) {
        super(props);

        this.state = { term: '' };

    }

    render() {
        //return <input onChange={this.onInputChange} /> ;
        return (
            <div>
                
                <input onChange={event => this.setState({ term: event.target.value })} />
                Value of the input: {this.state.term}
                
            </div>
        );
    }

    /*
    onInputChange(event) {
        console.log(event.target.value);

    }*/

}

export default SearchBar;

我试图用这种方式注释掉 render() 方法返回的 html 的一部分：

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            <!-- <input onChange={event => this.setState({ term: event.target.value })} /> -->
            <!--Value of the input: {this.state.term} -->

            <p>I want to see only this !!</p>
            
        </div>
    );
}

但这是错误的。

我错过了什么？我怎样才能从这里注释掉一些 HTML？

Answer 1

像在 js 中那样做

<div>
{/*
<div/>

*/}

</div>

Answer 2

在 JSX 文件中，您可以在大括号内使用块注释，例如{/* My comment */}.

你的情况：

render() {
    //return <input onChange={this.onInputChange} /> ;
    return (
        <div>
            
            {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
            {/*-Value of the input: {this.state.term} */}

            <p>I want to see only this !!</p>
            
        </div>
    );
}

Answer 3

 {/* <input onChange={event => this.setState({ term: event.target.value })} /> */}
 {/*-Value of the input: {this.state.term} */}

在render block里面，我们必须在大括号中使用multi-line注释{/* */}。

这是一个detailed ref

我如何注释掉定义到 React 组件的 return() 方法中的某些 HTML 代码？

How can I comment out some HTML code defined into the return() method of a React component?

javascript

reactjs

react-component

javascript-framework