React（6） --双向数据绑定及列表数据循环

最新推荐文章于 2022-04-28 10:24:49 发布

weixin_30729609

最新推荐文章于 2022-04-28 10:24:49 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/juewuzhe/p/10801772.html

博客介绍了React双向数据绑定，即model与view相互影响。还提及使用map渲染列表数据，JSX可插入表达式，以及将用户数据的JSX结构抽离成组件，并把数据作为配置参数传入，使代码更清晰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React双向数据绑定：model改变影响view，view改变反过来影响model

import React,{Component} from 'react';

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:"111"
        };
    }
    inputChange=(e)=>{
        this.setState({
            username:e.target.value
        })

    }
    setUsername=()=>{
        this.setState({
            username:'李四'
        })

    }
    render() {
        return (
            <div>
                <h2>双休数据绑定</h2><input  value={this.state.username} onChange={this.inputChange}/> 
                <p> {this.state.username}</p>
                <button onClick={this.setUsername}>改变username的值</button>
            </div>
        );
    }
}

export default Todolist;

使用 map 渲染列表数据

JSX 的表达式插入 {} 里面可以放任何数据

用户数据的 JSX 结构抽离成一个组件 User ，并且通过 props 把 user 数据作为组件的配置参数传进去；这样改写 Index 就非常清晰了，看一眼就知道负责渲染 users 列表，而用的组件是 User

const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]

class User extends Component {
  render () {
    const { user } = this.props
    return (
      <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
      </div>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
       {users.map((user, i) => <User key={i} user={user} />)}</div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)