React component参数传递

一.

var FancyCheckbox = React.createClass({
  render: function() {
    var fancyClass = this.props.checked ? ‘FancyChecked‘ : ‘FancyUnchecked‘;
    return (
      <div className={fancyClass} onClick={this.props.onClick}>
        {this.props.children}
      </div>
    );
  }
});
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById(‘example‘)
);

二.

var FancyCheckbox = React.createClass({
  render: function() {
    var { checked, ...other } = this.props;
    var fancyClass = checked ? ‘FancyChecked‘ : ‘FancyUnchecked‘;
    // `other` contains { onClick: console.log } but not the checked property
    return (
      <div {...other} className={fancyClass} />
    );
  }
});
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById(‘example‘)
);
时间: 2024-11-07 16:31:15

React component参数传递的相关文章

React.Component(V16.8.6)

组件的生命周期 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor() static getDerivedStateFromProps() render() componentDidMount() componentWillMount() 之后将废弃 更新 当组件的 props 或 state 发生变化时会触发更新.组件更新的生命周期调用顺序如下: static getDerivedStateFromProps() shouldComponentUpda

react component lifecycle

react comments 状态: 1.Mounted:React Components 被render解析生成DOM节点并被插入浏览器DOM结构的一个过程 2.Updated:Mounted的React Components 被重新render的过程 3.Unmounted:一个Mounted的React Component对应的DOM节点被从DOM中移除的过程 每一个状态都对应封装了相应的hook函数 hook函数Mounting:componentWillMount:在Component

[React] Style a React component with styled-components

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript. Old: import React, { Component }

002-and design-dva.js 知识导图-01JavaScript 语言,React Component

一.概述 参看:https://github.com/dvajs/dva-knowledgemap react 或 dva 时会不会有这样的疑惑: es6 特性那么多,我需要全部学会吗? react component 有 3 种写法,我需要全部学会吗? reducer 的增删改应该怎么写? 怎么做全局/局部的错误处理? 怎么发异步请求? 怎么处理复杂的异步业务逻辑? 怎么配置路由? 二.JavaScript 语言 2.1.变量声明 const 和 let 不要用 var,而是用 const 和

React.Component 与 React.PureComponent(React之性能优化)

前言 先说说 shouldComponentUpdate 提起React.PureComponent,我们还要从一个生命周期函数 shouldComponentUpdate 说起,从函数名字我们就能看出来,这个函数是用来控制组件是否应该被更新的. React.PureComponent 通过prop和state的浅对比来实现shouldComponentUpate(). 简单来说,这个生命周期函数返回一个布尔值. 如果返回true,那么当props或state改变的时候进行更新: 如果返回fal

React Component --React

一.Use functions to define components <script type="text/babel"> function HelloWord() { return <h1>Hello World!</h1>; } </script> 二.Use ES6 class to define components <script type="text/babel"> class HelloW

React.js Tutorial: React Component Lifecycle

Introduction about React component lifecycle. 1 Lifecycle A React component in browser can be any of the following three statuses: mounted, update and unmounted. So React component lifecycle can be divided into three phases according to these statuse

React.Component三种手动绑定this方法

React.Component有三种手动绑定方法: 可以在构造函数中完成绑定 可以在调用时使用method.bind(this)来完成绑定 可以使用arrow function来绑定. 拿上例的handleClick函数来说,其绑定可以有: 1.构造函数绑定 constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); //构造函数中绑定 } 2.调用时绑定method.bind(this)

react component 语法报错解决

React es6语法 class Counter extends Component { static propTypes = { 报错. 两个解决方案: 1.等号改为冒号,但是看着别扭 2.yarn add babel-preset-stage-0 { "presets": ["react", "es2015", "stage-0"] }