1.react中css样式的使用方式
1)jsx内嵌样式(这第一个大括号表示要在jsx中写js,第二个表示js对象)
<li style = {{color : '#FF0'}}>jsx内嵌样式</li>
2)使用className在通过css文件控制样式
<li className = 'Red'>使用className在通过css控制样式</li>
3)当有多个className时,也就是有多重特征时,可以从npm中下载classnames,因为classNames为方法
<li className = {classNames("a",{b:true,c:false})}></li>
4)使用styled-components在原有元素的样式上包装成新的样式(扩展元素名都需要大写,且第一种表示为模板字符串``,不是引号)
const Title = styled.h1`
color : #F00;
`
const Button = styled.button({
color: 'grey',
});
<Title />
2.关于组件布局总结
1）每个组件渲染时,只能拥有一个根标签,如果根标签不想用div占位时,可以使用Fragment即空组件
2) 每个组件原则上应该都有一个文件夹
3) 在路径问题上,react会默认寻找当前路径下的index.js,import时可以省略部分
4) 在父js中,若仅为导出使用,可用以下格式
export {default as List} from './list';
3.关于组件中的props的总结:
1)props是组件传递值的对象,组件可以通过添加属性来传递值,组件的子元素为props中的children值可以为元素等值
2)类组件可以直接调用,函数组件需要通过函数名.props去调用
3)往props里传数值时,需加大括号表示,否则即为字符串
4)在props对象里的值进行检验时,有props-types方法,即用组件自己提供的propsTypes进行数值类型和有无的检验
Test.propsTypes = {
key : props-types.String.isRequired （注意不能单独用isRequired,会报错）
}
5)对props里的值设置默认值时,组件自己提供了defaultProps
Test.defaultProps = { //这是函数式组件的使用方法
key : 默认值
}
4.组件的分类:
1)根据组件的创建方式不一样分为:
类组件和函数组件
2)根据组件有无state分为:
有状态组件和无状态组件
3)根据控制程度可分为
完全受控组件:数据全部来自于props,数据源传递
半受控组件:部分数据受控于数据源(props),部分数据受控于state
不受控组件:数据受控于内部state的变化
5.模板渲染的语法和props向下传递的技巧
1)在数据源中,数据都是在构造函数中对state进行初始化操作(注意,得先调用super方法)
2)然后利用props向下传递,不能跨组件传递,
3)如果传递的内容中有html字符串时,可以用以下方式解译
<div dangerousSetInnerHTML = {{_html: '<div>html字符串</div>'}} />
4)如果在传递的数据中有数组时,可以用js中的map解析
this.props.list.map(item => {
return (
<div key="key值必须给,否则会报错" value = {item.value}/>
)
})
6.react对内部数据进行动态修改时使用setState修改数据的两种方式:（这个方法可以有两个参数， 第一个参数可以有两种情况）
1)this.setState({对象里是state中要修改的内容}) 第一个参数为对象
2)this.setState((preState,preProps) => { 上一次的State和上一次的Props
return {}
)}
3)这个方法有第二个参数，因为这个方法是异步的,所以第二个参数是回调函数,参数是改变后的 state和props