jsx语法

使用一个父节点包裹
//  <p> 外面必须再包裹一层 <div> 
return ( 
        <div>
             <p>段落1</p>
             <p>段落2</p>
        </div>
   )
jsx里面用{/* */}注释
return(
    //jsx外面的注释
    <div>
        {/*  这是里面的注释  */}
        <p>这是p标签</p>
    </div>
)
样式
css样式:`<p className="header">这是p标签</p>`
内联样式:`<p style={{ fontSize:"25px",color:"red"}}>这是p标签</p>` 
事件
    var NunAdd = React.createClass({
            handlerClick:function(){
                console.log(123)
            },

            render:function(){
                return(
                    <div>
                        <button onClick = {this.handlerClick.bind(this)}>点击</button>
                    </div>
                )
            }
        })

注意:onClick是驼峰式写法,以及bind(this)建议都加上;

循环,遍历
一般用到的是jq里面的map
class Hello extends React.Components{
    render(){
        const arr = ["a","b","c"];
        return(
            <div>
                {
                arr.map((item,index)=>{
                    return <p key={index}>this is {item}</p>
                })
            /* es5是这样的 上面的是箭头函数
                arr.map(function(item,index){
                    return <p key={index}>this is {item}
                })
            */
                }
            </div>
        )
    }
}

注意,arr.map是包裹在{}中的,key={index}有助于React的渲染优化,jsx中的{}可放一个可执行的 js 程序或者变量

判断
jsx的判断一般用到的是三元表达式,表达式也是放在{}里面的
return ( 
    <div> 
        <p style={{display: true ? "block" : "none"}}>段落1</p> 
    </div> 
    )

智能组件和木偶组件 (自己的记录。。)

    containers(智能组件) 和 components(木偶组件)两个不同的文件夹

智能组件 在日常开发中,我们也简称“页面”。为何说它“智能”,因为它只会做一些很聪明的事儿,脏活累活都不干。它只对数据负责,只需要获取了数据、定义好数据操作的相关函数,然后将这些数据、函数直接传递给具体实现的组件即可。
containers里面装的是页面,页面里面也可能有subpage等子页面

木偶组件 这里“木偶”一词用的特别形象,它总是被人拿线牵着。它从智能组件(或页面)那里接受到数据、函数,然后就开始做一些展示工作,它的工作就是把拿到的数据展示给用户,函数操作开放给用户。至于数据内容是什么,函数操作是什么,它不关心。
components里面装的是组件 必须是多个组件用到才会放到这个文件里面这里写图片描述

<think>嗯,用户想在VS Code中设置或修复JSX语法高亮。首先,我需要回忆一下VS Code如何处理语法高亮。通常,这涉及到语言模式和相关的扩展。JSX通常用于React项目,所以可能需要正确的文件扩展名,比如.jsx或.tsx,或者确保文件的语言模式设置为JavaScript React或TypeScript React。 接下来,可能需要检查用户是否安装了相关的扩展。比如,VSCode默认的JavaScript和TypeScript支持可能已经包括了JSX高亮,但有时候可能需要额外的插件,比如ES6 React Snippets或者Prettier。另外,Vetur插件主要是针对Vue的,可能对JSX支持不够,这时候可能需要禁用或者调整设置。 然后,想到用户可能需要检查他们的文件关联设置。如果.js文件被错误地关联到普通JavaScript而不是JavaScript React,语法高亮可能不会生效。这时候需要手动更改语言模式,或者通过settings.json配置files.associations来关联.jsx到正确的语言模式。 另外,主题也可能影响语法高亮的效果,有些主题可能没有针对JSX的优化颜色方案。建议用户尝试更换主题,比如官方推荐的Dark+或者Material Theme。 还有,用户提到的ESLint和Prettier配置可能和代码格式化有关,但语法高亮更多是编辑器本身的功能。不过,如果存在语法错误,ESLint可能会提示,但不会直接影响高亮。需要确保ESLint配置正确,避免因为语法错误导致高亮中断。 最后,可能需要指导用户通过检查文件扩展名、语言模式、安装必要扩展、调整设置和更换主题来逐步排查问题。如果问题依然存在,可能需要查看控制台是否有错误日志,或者重新安装VS Code。</think>### 如何在 VS Code 中设置或修复 JSX 语法高亮 #### 1. 确保文件扩展名和语言模式正确 - **文件扩展名**:JSX 文件通常以 `.jsx` 或 `.tsx`(TypeScript)结尾。如果文件扩展名为 `.js`,VS Code 可能无法自动识别 JSX 语法。 - **手动切换语言模式**: 1. 打开 JSX 文件后,点击 VS Code 右下角的语言模式标识(如“JavaScript”)。 2. 选择 `JavaScript React` 或 `TypeScript React`(适用于 TSX 文件)[^3]。 #### 2. 安装必要插件 - **ESLint 和 Prettier**:确保代码格式化和语法检查正常(需配置 `.eslintrc` 和 `.prettierrc`)[^2]。 - **React 相关插件**:例如: - **ES7+ React/Redux/React-Native Snippets**(提供代码片段支持) - **Babel JavaScript**(增强 JSX 语法高亮) #### 3. 检查主题兼容性 某些主题可能对 JSX 支持不完善,可尝试切换为官方主题(如 `Dark+ (Default Dark)`)或热门主题(如 `Material Theme`)。 #### 4. 配置 `settings.json` 在 VS Code 设置文件(`settings.json`)中添加以下规则: ```json { "emmet.includeLanguages": { "javascript": "javascriptreact" }, "files.associations": { "*.js": "javascriptreact" } } ``` 此配置将 `.js` 文件关联到 JSX 语法模式[^1]。 #### 5. 验证语法高亮 - 输入 JSX 代码片段,如: ```jsx const App = () => ( <div className="container"> <h1>Hello JSX</h1> </div> ); ``` - 若标签(如 `<div>`)显示为不同颜色,则说明高亮生效。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值