react之动态参数设置

最新推荐文章于 2025-11-29 06:30:00 发布

原创最新推荐文章于 2025-11-29 06:30:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

两种动态参数的设置

state查询
setState改变参数
Ⅰ、state进行查询

// App.js

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '123'
    };
  }

  render() {
    return <div>{this.state.content}</div>;
  }
}

Tips:

1、这里通过{}来表明模板插入变量 vue中是{{}}注意即可，然后通过读取this.state.content来读取constructor中构造的变量state
2、这里的state是默认字段,用state来代表组件的仓库值

Ⅱ、setState改变参数的方法


class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '123'
    };
  }
  // 在页面挂在完后进行的任务，生命周期函数
  componentDidMount() {
    const _this = this;
    setTimeout(() => {
      _this.setState({ content: 'change' });
    }, 1000);
  }

  render() {
    return <div>{this.state.content}</div>;
  }
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

Tips:

1、利用setState对state仓库中的参数进行改变，如果直接使用this.state.content =1;没有任何的效果，类似于vue中通过this.$set设置引用类型的赋值会比较有效；
2、在App应用中，我们将Header和Content的组件都嵌套在App下
3、React中参数动态绑定原理理解：当一个组件的props和state发生变化的时候，render函数会重新渲染，使整个dom得到更新。