0x001 引出题目
让我们先来看一个栗子:
class App extends React.Component {
render() {
return (
<h1></h1>
<h1></h1>
)
}
}
ReactDom.render(
<App theme='dark'/>,
document.getElementById('app')
)
上面的栗子中的render
返回了两个同级h1
,编译的时刻将会看到一个报错:
SyntaxError: index.js: Adjacent JSX elements must be wrapped in an enclosing tag.
jsx
只能返回一个闭合的tag
,比方
class App extends React.Component {
render() {
return <hr/>
}
}
或许:
class App extends React.Component {
render() {
return 'helloworld'
}
}
又或许:
class App extends React.Component {
render() {
return <div>
<h1>title</h1>
<p>content</p>
</div>
}
}
总的来说,只能返回一个根元素,然则现实中总会碰到奇异的场景,愿望能够返回多个,栗子:
class Td extends React.Component {
render() {
return (
<td>1</td>
<td>2</td>
)
}
}
class Table extends React.Component {
render() {
return <table>
<tr>
<Td/>
</tr>
</table>
}
}
很明显,会有语法错误,修复:
class Td extends React.Component {
render() {
return (<div>
<td>1</td>
<td>2</td>
</div>)
}
}
检察结果:
多了一级,那真的没办法了吗?固然有了,就是Fragment
了
0x002 Fragment
class Td extends React.Component {
render() {
return (<>
<td>1</td>
<td>2</td>
</>)
}
}
将跟元素替换成<>...</>
就行啦
固然,这是一个缩写,完全的写法应该是:
class Td extends React.Component {
render() {
return (<React.Fragment>
<td>1</td>
<td>2</td>
</React.Fragment>)
}
}
-
<React.Fragment></React.Fragment>
结果和<></>
是一致的然则有一点区分就是React.Fragment
是能够有属性的,而<></>
没法具有属性。 -
<React.Fragment></React.Fragment>
只要一个属性,那就是key
0x003 栗子
可睁开压缩的表格
- 源码
class Tr extends React.Component {
constructor(props) {
super(props);
this.state = {
extend: false
}
}
render() {
const {extend} = this.state
const {data} = this.props
return (
<>
<tr>
<td onClick={() => this.handleExtend()}>
<button className='btn btn-primary'>{extend ? '睁开' : '收起'}</button>
</td>
<td>{data.name}</td>
<td>{data.age}</td>
</tr>
{
extend ? <tr>
<td colSpan='3'>{data.detail}</td>
</tr> : null
}
</>
);
}
handleExtend() {
this.setState({
extend: !this.state.extend
})
}
}
class Table extends React.Component {
constructor() {
super()
this.state = {
users: [
{
name: '张三',
age: '11',
detail: '我很高兴'
},
{
name: '李四',
age: '22',
detail: '我也很高兴'
},
{
name: '王五',
age: '33',
detail: '我比张三和李四更高兴'
}
]
}
}
render() {
const {users} = this.state
return (
<table className='table'>
{
users.map((u, i) => <Tr data={u} key={i}/>)
}
</table>
);
}
}
ReactDom.render(
<Table/>,
document.getElementById('app')
- 结果
- dom