react进阶—02state切换

最新推荐文章于 2023-11-07 10:37:49 发布

jiaojsun

最新推荐文章于 2023-11-07 10:37:49 发布

阅读量133

点赞数

分类专栏： react进阶

本文链接：https://blog.csdn.net/jiaojsun/article/details/87904896

版权

react进阶专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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>

效果

jiaojsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react进阶—02state切换

本节实现效果是点击子项打开关闭demo.js&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;title&gt;My React!&lt;/title&gt;&lt;script src="https://cdn.staticfile.org/rea
复制链接

扫一扫