JSX须知

XML 基本语法

定义标签时,只允许被一个标签包裹。标签一定要闭合

 

元素类型

DOM 元素和组件元素。React中的我们的重点是组件,对应规则是 HTML 标签首字母是否为小写字母,其中小写首字母对应 DOM 元素,而组件元素自然对应大写首字母。

JSX 还可以通过命名空间的方式使用组件元素,以解决组件相同名称冲突的问题,或是对一组组件进行归类。其实就好像不同对象中的同名方法一个道理。

 

注释

在 HTML 中,注释写成  <!-- content --> 这样的形式,但在 JSX 中并没有定义注释的转换方法,所以这种方式不能使用了。事实上,JSX 还是 JavaScript,依然可以用简单的方法使用注释,唯一要注意的是,在一个组件的子元素位置使用注释要用{}包起来。

function Welcome(props) {
    return <button className="btn btn-blue">
        /*Test comment*/
        <em>{props.name}</em>
    </button>
}

我们需要更改如下:

function Welcome(props) {
    return <button className="btn btn-blue">
        {/*Test comment*/}
        <em /*Test comment */>{props.name}</em>
    </button>
}

在标签中注释仍然可以使用/**/,例如em元素中的注释

这里在去扩展到条件注释,判断浏览器版本的数注释,就不能像以前那样使用。
<!--[if IE]>
    <p>Work in IE browser</p>
<![endif]-->
这样的话使用 JavaScript 判断浏览器版本来替代:
{
    (!!window.ActiveXObject || 'ActiveXObject' in window) ?
        <p>Work in IE browser</p> : ''
}

 

元素属性

在 JSX 中,不论是 DOM 元素还是组件元素,它们都有属性。

DOM 元素的属性是标准规范属性,但有两个例外—— class 和  for ,这是因为在 JavaScript 中这两个单词都是关键词。因此,我们这么转换:

  • class 属性改为  className 
  • for 属性改为  htmlFor 
<div className='class'>
  <label htmlFor='name'></label>
</div>

渲染如下:

组件元素中的属性则是自定义的属性,用于传入的props中的属性。

const Header = (props) => (
    <h3 title={props.title}>{props.text}</h3>
);

class App extends Component {
    render() {
        return (
            <Header title="Sara" text="hello!"/>
        );
    }
}

也可以如下:

const Header = ({title, text}) => (
    <h3 title={title}>{text}</h3>
);

class App extends Component {
    render() {
        return (
            <Header title="Sara" text="hello!"/>
        );
    }
}

Boolean属性

省略 Boolean 属性值会导致 JSX 认为  bool 值设为了  true 。要传  false 时,必须使用属性表达式。这常用于表单元素中,比如  disabled 、 required 、 checked 和  readOnly 等。例如, <Checkbox checked={true} /> 可以简写为  <Checkbox checked /> ,反之  <Checkbox checked={false} /> 就可以省略  checked 属性。

class Checkbox extends Component {
    render() {
        return (
            <input type="checkbox" checked={this.props.checked}/>
        );
    }
}

Checkbox.propTypes = {
    checked: PropTypes.bool
}

class App extends Component {
    render() {
        return (
            <Checkbox checked/>
        );
    }
}

如图,默认值为true

展开属性

const data = { name: 'foo', value: 'bar' };
const component = <Component name={data.name} value={data.value} />;

可以写成

const data = { name: 'foo', value: 'bar' };
const component = <Component {...data} />;

我们可以使用如下将当前组建的属性传入到子组件中去。

const component = <Component {...props} />;

自定义 HTML 

如果在 JSX 中往 DOM 元素中传入自定义属性,React 是不会渲染的:

<div d="xxx">content</div>

如果要使用 HTML 自定义属性,要使用  data- 前缀,这与 HTML 标准也是一致的:

<div data-attr="xxx">content</div>

然而,在自定义标签中任意的属性都是被支持的:

<x-my-component custom-attr="foo" />

以  aria- 开头的网络无障碍属性同样可以正常使用:

<div aria-hidden={true}></div>
 <input data-customerproperty1="proprtty1" property2='property2' aria-property3="property3" type="checkbox" checked={this.props.checked}/>

 

Javascript属性表达式

属性值要使用表达式,只要用  {} 替换  "" 即可:

// 输入(JSX):
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出(JavaScript):
const person = React.createElement(
    Person,
    {name: window.isLoggedIn ? window.name : ''}
);

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页