JSX须知
XML 基本语法
定义标签时，只允许被一个标签包裹。标签一定要闭合
元素类型
DOM 元素和组件元素。React中的我们的重点是组件，对应规则是 HTML 标签首字母是否为小写字母，其中小写首字母对应 DOM 元素，而组件元素自然对应大写首字母。
JSX 还可以通过命名空间的方式使用组件元素，以解决组件相同名称冲突的问题，或是对一组组件进行归类。其实就好像不同对象中的同名方法一个道理。
注释
在 HTML 中，注释写成 这样的形式，但在 JSX 中并没有定义注释的转换方法，所以这种方式不能使用了。事实上，JSX 还是 JavaScript，依然可以用简单的方法使用注释，唯一要注意的是，在一个组件的子元素位置使用注释要用{}包起来。
function Welcome(props) {return
}
我们需要更改如下：
function Welcome(props) {return
}在标签中注释仍然可以使用/**/，例如em元素中的注释
这里在去扩展到条件注释，判断浏览器版本的数注释，就不能像以前那样使用。
这样的话使用 JavaScript 判断浏览器版本来替代：
{(!!window.ActiveXObject || 'ActiveXObject' in window) ?Work in IE browser
: ''
}
元素属性
在 JSX 中，不论是 DOM 元素还是组件元素，它们都有属性。
DOM 元素的属性是标准规范属性，但有两个例外—— class 和 for ，这是因为在 JavaScript 中这两个单词都是关键词。因此，我们这么转换：
- class 属性改为 className
- for 属性改为 htmlFor
渲染如下：
组件元素中的属性则是自定义的属性，用于传入的props中的属性。
const Header = (props) => ({props.text}
);class App extends Component {render() {return (也可以如下：
const Header = ({title, text}) => ({text}
);class App extends Component {render() {return (Boolean属性
省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true 。要传 false 时，必须使用属性表达式。这常用于表单元素中，比如 disabled 、 required 、 checked 和 readOnly 等。例如，
class Checkbox extends Component {render() {return ();}
}Checkbox.propTypes = {checked: PropTypes.bool
}class App extends Component {render() {return (如图，默认值为true
展开属性
const data = { name: 'foo', value: 'bar' };
const component = 可以写成
const data = { name: 'foo', value: 'bar' };
const component = 我们可以使用如下将当前组建的属性传入到子组件中去。
const component = 自定义 HTML
如果在 JSX 中往 DOM 元素中传入自定义属性，React 是不会渲染的：
content如果要使用 HTML 自定义属性，要使用 data- 前缀，这与 HTML 标准也是一致的：
content然而，在自定义标签中任意的属性都是被支持的：
以 aria- 开头的网络无障碍属性同样可以正常使用：
Javascript属性表达式
属性值要使用表达式，只要用 {} 替换 "" 即可：
// 输入（JSX）：
const person = // 输出（JavaScript）：
const person = React.createElement(Person,{name: window.isLoggedIn ? window.name : ''}
);
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！