React-在组件中使用style行内样式

React-在组件中使用style行内样式

import React, {Component} from 'react'
import CmtItem from '@/components/CmtItem'
export default class CmtList extends Component{
	constructor(){ 
		super()
		this.state = {
			CommentList: [
				{ id: 1, user: '武器大师', content:'能用方天画戟 给我削个梨吗 或者用玉玺给我砸核桃，实在不行用高压电线给我弹首东风破 给我解解闷儿也行' },
				{ id: 2, user: '铠甲勇士', content:'你已触犯银河正义法中不可饶恕之蛇皮罪，我独秀铠甲将剥夺你的一切权利并对你实行封印缉捕，束手就擒吧' },
				{ id: 3, user: '扁鹊', content:'你再次触犯了银河正义法中不可饶恕之独秀罪，我扁鹊铠甲将剥夺你的一切权利并对你实行扁鹊三连，束手就擒吧！' },
				{ id: 4, user: '盐帮大佬', content:'飞盐走臂，关节盐' },
				{ id: 5, user: '二哈的主子', content:'狗是个好狗，主人正不正经就不知道了/人和狗总得疯一个/狗子，不怕你是二哈，就怕你遇到一个二哈的主子！' }
			]
		}
	}
	render() {
		return <div>
			<h1 style={ { color: 'red', fontSize: '35px', zIndex: 3,fontWeight: 200,textAlign: 'center'}}>想想要说嘛呀！</h1>
			{this.state.CommentList.map(item => <CmtItem {...item}></CmtItem>)}
		</div>
	}
}

封装

import React from 'react'
const styles = {
	item: {border:'1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'},
	user: {fontSize: '14px'},
	content: {fontSize: '12px'}
}
export default function CmtItem(props){
	return  <div style={styles.item}>
			<h1 style={styles.user}>{props.user}</h1>
			<p style={styles.content}>{props.content}</p>
			</div>
}