React学习-条件渲染、列表渲染、表单渲染

最新推荐文章于 2023-04-30 00:01:04 发布

原味的你

最新推荐文章于 2023-04-30 00:01:04 发布

阅读量499

点赞数

文章标签： react js 列表

本文链接：https://blog.csdn.net/weixin_43005178/article/details/109121207

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

React学习-条件、列表渲染

可以使用if，else等进行条件判断，进行条件渲染

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<body>
    <div id="app"></div>
</body>
<script type="text/babel">
    class Demo2 extends React.Component{
        constructor(){
            super();
        }
        render(){
            if(this.props.sel == 1){
                return <div>111</div>
            }else{
                return <div>222</div>
            }
        }
    }
    class Demo extends React.Component{
    
        constructor(){
            super();
            this.state = {
                sal:1
            }
        }
        fn(type){
            this.setState({
                sal:type
            })
        }
        render(){
            return(
                <div>
                    <button className={this.state.sal === 1 ? 'active' : ''} onClick={this.fn.bind(this,1)}>tab1</button>
                    <button className={this.state.sal === 2 ? 'active' : ''} onClick={this.fn.bind(this,2)}>tab2</button>
                    <Demo2 sel={this.state.sal}/>
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>
</html>
<style>
    .active{
        background: red;
    }
</style>

列表渲染

第一种方法

<script type="text/babel">
    class Demo extends React.Component{
    
        constructor(){
            super();
            this.state = {
                data:['c++','java','javascript','python']
            }
        }
        render(){
            var arr = [];
            this.state.data.forEach((v,i)=>{
                arr.push(
                    <li key={i}>代码种类有：{v}</li>
                )
            })
            return(
                <ul>
                    {arr}
                </ul>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>

第二种方法

<script type="text/babel">
    class Demo extends React.Component{
    
        constructor(){
            super();
            this.state = {
                data:['c++','java','javascript','python']
            }
        }
        render(){
            let arr = this.state.data.map((v,i)=><li key={i}>v代码种类有：{v}</li>)
            return(
                <ul>
                    {arr}
                </ul>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>

总结：根据数据，通过map返回出新数组，数组里面的标签必须添加上key属性，实在没有不重复的就用下标

表单渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type='text/babel'>
    class Demo extends React.Component{
        constructor(){
            super()
            this.state = {
                user:'',
                pass:'',
                msg:'',
                sex:'boy',
                sel:''
            }
        }
        fnChange(event){
            this.setState({
                [event.target.name]:event.target.value
            })
        }
        render(){
            return (
                <div>
                    <form>
                        <ul>
                            <li><input type="text" name="user" value={this.state.user} onChange={this.fnChange.bind(this)}/></li>
                            <li><input type="password" name="pass" value={this.state.pass} onChange={this.fnChange.bind(this)}/></li>
                            <li><textarea name="msg" value={this.state.msg} onChange={this.fnChange.bind(this)}></textarea></li>
                            <li>
                                男：<input type="radio" name="sex" value="boy" onChange={this.fnChange.bind(this)} checked/>
                                女：<input type="radio" name="sex" value="girl"/>
                            </li>
                            <li>
                                <select name="sel" onChange={this.fnChange.bind(this)} value={this.state.sel}>
                                    <option value="html">html</option>
                                    <option value="css">css</option>
                                    <option value="js">js</option>
                                </select>
                            </li>
                            <li>
                                <button>提交</button>
                            </li>
                        </ul>
                    </form>
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('app'))
</script>
</html>

总结：

表单中增加了value，用户将无法操作表单，已经变成了只读，解决办法：defaultValue，onChange，如果是非受控表单就用defaultValue，如果是受控表单就用onChange
如果有checked，要么用onChange变成受控，要么用defaultValue变成非受控
如果有select，在select上使用defaultValue或者value属性而不是在option上设置selected

原味的你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React学习-条件渲染、列表渲染、表单渲染

React学习-条件、列表渲染可以使用if，else等进行条件判断，进行条件渲染代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title
复制链接

扫一扫