React(三)——React组件之属性默认值

目录

1.默认属性值

1.1defaultProps 静态属性

1.1.1基于 static 的写法

2.非受控组件默认值

2.1defaultValue 属性

2.1defaultChecked 属性

---

1.默认属性值

1.1defaultProps 静态属性

defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况

注意：defaultProps 是 Class 的属性，也就是静态属性，不是组件实例对象的属性

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                <h2>MyComponent - {this.props.max}</h2>
            </div>
        );
    }
}

MyComponent.defaultProps = {
    max: 10
}

ReactDOM.render(
    <MyComponent />,
    document.getElementById('app')
);

1.1.1基于 static 的写法

class MyComponent extends React.Component {
  	static defaultProps = {
      	max: 10
    }
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                <h2>MyComponent - {this.props.max}</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <MyComponent />,
    document.getElementById('app')
);

2.非受控组件默认值

有的时候，我们希望给一个非受控组件一个初始值，但是又不希望它后续通过 React.js 来绑定更新，这个时候我们就可以通过 defaultValue 或者 defaultChecked 来设置非受控组件的默认值

2.1defaultValue 属性

<input type="text" defaultValue={this.state.v1} />

2.1defaultChecked 属性

<input type="checkbox" defaultChecked={this.state.v2}  />
<input type="checkbox" defaultChecked={this.state.v3}  />