React更新元素基础

发布时间：2020-12-15 20:40:15 所属栏目：百科来源：网络整理

导读：React元素创建后无法修改其内容和属性。唯一的办法是创建新的元素，传入ReactDOM.render()方法三种实现形式： 1.整体替换 function tick () { const ele = ( div h1更新元素/h1 h2现在是：{ new Date().toLocaleTimeString()}/h2 /div) ; ReactDOM.render(

React元素创建后无法修改其内容和属性。唯一的办法是创建新的元素，传入ReactDOM.render()方法

三种实现形式：

1.整体替换

function tick () {
  const ele=(
    <div>
      <h1>更新元素</h1>
      <h2>现在是：{new Date().toLocaleTimeString()}</h2>  
    </div>)  ;
  ReactDOM.render(
    ele,document.getElementById(‘example‘)
  )
}
setInterval(tick,1000);

2.将要展示的部分封装起来

function Clocks (props) {
  return (
    <div>
      <h1>Hello,world</h1>
      <h2>现在是{props.date.toLocaleString()}</h2>
    </div>
  )
}
function tick () {
  ReactDOM.render(
    <Clock date={new Date()}>,1000)

解析：每隔1秒执行tick? 触发Clock 将参数传递到Clock函数中，修改html

3.创建React.Component的类，封装要显示的元素

class Clock extends React.Component{
  render(){
    return (
      <div>
        <h1>Hello world</h1>
        <h2>现在是{this.props.date}</h2>
      </div>
    )
  }
}
function tick (){
  ReactDOM.render(
    <Clock date={new Date()}/>,document.getElementById(‘example‘)
  )
}
setInterval(tick,1000)

React会对比元素内容的先后不同，渲染的时候只更新不同的部分

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

React更新元素 基础

React更新元素基础