0x001 lead to problems

Let's start with a chestnut:

class App extends React.Component {
    render() {
        return (
            <h1></h1>
            <h1></h1>
        )
    }
}

ReactDom.render(
    <App theme='dark'/>,
    document.getElementById('app')
)

The render in the chestnut above returns two siblings h1. When compiling, an error will be reported:

SyntaxError: index.js: Adjacent JSX elements must be wrapped in an enclosing tag.

jsx can only return a closed tag, such as

class App extends React.Component {
    render() {
        return <hr/>
    }
}

Or:

class App extends React.Component {
    render() {
        return 'helloworld'
    }
}

Or:

class App extends React.Component {
    render() {
        return <div>
            <h1>title</h1>
            <p>content</p>
        </div>
    }
}

In general, only one root element can be returned, but in practice, there are always strange scenes. I hope to return more than one, chestnut:

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>
    }
}

Obviously, there will be syntax errors. Fix:

class Td extends React.Component {
    render() {
        return (<div>
            <td>1</td>
            <td>2</td>
        </div>)
    }
}

View effect:

One more level, is that really impossible? Of course, it's Fragment

0x002 Fragment

class Td extends React.Component {
    render() {
        return (<>
            <td>1</td>
            <td>2</td>
        </>)
    }
}

Replace the following element with < >... < / > only

Of course, this is an abbreviation. The complete writing method should be:

class Td extends React.Component {
    render() {
        return (<React.Fragment>
            <td>1</td>
            <td>2</td>
        </React.Fragment>)
    }
}

• The effect of < React.Fragment > < / React.Fragment > is the same as that of < >.
• < react. Fragment > < react. Fragment > has only one attribute, which is key

0x003 chestnut

Expandable and contractible table

• Source code

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 ? 'Open' : 'Retract'}</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: 'Zhang San',
                    age: '11',
                    detail: 'I'm very happy.'
                },
                {
                    name: 'Li Si',
                    age: '22',
                    detail: 'I'm happy, too'
                },
                {
                    name: 'Wang Wu',
                    age: '33',
                    detail: 'I'm happier than Zhang San and Li Si'
                }
            ]
        }
    }

    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')

• Effect

• dom