class是js关键字,jsx中要用className

发布时间 2023-11-11 15:23:55作者: 龙陌

下面的 JSX 代码中,哪一个无法达到预期的效果?

A

Hello World

B C
{msg}
D E
F

正确答案:C

选c class是js关键字,这里要用className。对于E选项,在jsx中直接写行内样式时不能采用引号,而是style={{color:'red'}}的方式

选择C,在jsx里面,要把class换成className才能正确编译,表示样式.

<script type="text/babel">
      ReactDOM.render(
       <h1 className="aa">菜鸟教程</h1>,
       document.getElementById('example')
      );
</script>

E是对的.
在react里面的jsx,style={ } 里面填写的是一个js对象.其中样式里面可以不写px,然后编译转换的时候会自动加上.
如果要加px,应该是fontSize: '100px',加单引号

<script type="text/babel">
     ReactDOM.render(
      <h1 style = { {
        fontSize: 100,
        color: '#FF0000'
     }}>菜鸟教程</h1>,
      document.getElementById('example')
     );
</script>