react进阶—02state切换

àì夳堔傛蜴生んèń 2022-03-17 12:52 197阅读 0赞

本节实现效果是点击子项打开关闭

demo.js

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./data.js"></script>
    <style>
        .penel{
            border: 1px solid #000;
            width: 80%;
        }
        .title{
            margin:0;
            padding: 10px;
            background: #ccc;
        }
        p.vip{
            color:red;
        }
        p.message{
            color:#aaa;
        }
    </style>
    
    </head>
    <body>
    
    <div id="app"></div>
    <script type="text/babel">
        class List extends React.Component{
            render(){
                return (<ul>
                    {this.props.list.map(function(val,index){
                        return (
                            <li key={index}>
                                <p className="vip">{val.username}</p>
                                <p className="message">{val.message}</p>
                            </li>
                        )
                    })}
                </ul>)
    
            }
        }
    
        class Item extends React.Component{
            constructor(){
                super(...arguments);
                this.state = {
                    show:this.props.show
                }
            }
            changeList(){
                this.setState({
                    show: !this.state.show
                });
            }
            render(){
                console.log(this.props);
                return(<div>
                        <h2 className="title" onClick={this.changeList.bind(this)}>{this.props.data.name}</h2>
                        {this.state.show?<List list={this.props.data.list} />:""}
                    </div>)
            }
        }
    
        class Penel extends React.Component {
            constructor(){
                super(...arguments);
                this.state = {
                    showList:[true,false,false]
                }
            }
            setShow(){
                var list = Object.keys(dataList).map((val,index) => {
                    return <Item data={dataList[val]} key={index} show={this.state.showList[index]}/>
                });
                return list
            }
            render(){
                return (
                    <div className="penel">
                        {this.setShow()}
                    </div>
                );
            }
        }
        ReactDOM.render(
            <Penel />,
            document.getElementById('app')
        );
    </script>
    
    </body>
    </html>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220317/9a0ea5fa21e5482daea7f0f0868feac0.png