标签：语法 return render react props Test console jsx class
JSX语法
1、标签不能添加引号，换行用括号包裹，并且只有一个根标签
const H1 = <h1>标题</h1>
const Div = (
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
)
2、变量使用花括号
const id = 1
const name = "杜恒"
const Div = <div data-id={id}>{name}</div>
3、外连样式与内联样式
// 使用class时，需要写className的方式
const Div = <div className="box"></div>
// 内联样式时，需要成变量内包对象方式
const Div2 = <div style={{ color: '#ff6800', fontSize: '30px' }}>Test</div>
4、单标签需要闭合
const div = (
<div>
<br />
<input />
</div>
)
5、循环数组
const arr = ['vue', 'react', 'jquery']
const Ul = (
<ul>
{ arr.map(item => <li key={item}>{item}</li>) }
</ul>
)
组件
1、函数式组件（简单组件<在hooks里面可以实现3大属性>）
function Test() {
console.log(this) // undefined
return <div>Test组件</div>
}
ReactDOM.render(<Test />, document.querySelector("#main"))
2、类式组件（复杂组件）
class Test extends React.Component {
render() {
console.log(this); // 由Test类创造的组件实例对象
return <div>Test组件</div>
}
}
/*
*
* 首先解析Test标签，并找到Test的类
* 接着React内部，会去new这个Test类，接着会初始化实例对象上的render方法
*
*/
ReactDOM.render(<Test />, document.querySelector("#main"))
组件实例三大属性 state
class Weather extends React.Component {
render() {
console.log(this);
return <h1>今天天气很炎热</h1>
}
}
ReactDOM.render(<Weather />, document.querySelector("#main"))
打印类的实例对象上的this，可以看到实例对象身上挂了一个state属性，默认值为null
class Weather extends React.Component {
/* constructor根据页面上有多少个实例就调用几次 */
constructor(props) {
super(props)
/* 向当前实例上挂载一个属性 */
this.state = { isHot: false }
/* 解决changeWeather中的this指向undefined的问题 */
this.changeWeather = this.changeWeather.bind(this)
}
/* render调用1 + n次，第一次进入默认执行一次，后state更新触发render */
render() {
/* this指向当前的实例，于是可以通过this访问到state属性 */
console.log(this);
/* onClick绑定的函数不能加括号，否则会直接执行函数！ */
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
}
/*
*
* changeWeather挂载在Weather的原型对象上，供Weather的实例对象使用，
* 只有Weather的实例对象去调用这个方法，函数内的this才会指向Weather的实例对象
* 由于在class中会将函数开启局部严格模式，因此changeWeather里的this会指向undefined
* 但需要解决这个this指向问题，因此就需要在上方初始化的时候，改变this的指向
*
*/
changeWeather() {
console.log(this);
/*
* 状态不可直接更改！
* this.state.isHot = !this.state.isHot ×
*/
this.setState({
isHot: !this.state.isHot
})
}
}
ReactDOM.render(<Weather />, document.querySelector("#main"))
上面的代码可以简写成下方代码
class Weather extends React.Component {
// 直接赋值给实例化对象身上
state = { isHot: false }
// 直接赋值给实例化对象身上
changeWeather = () => {
console.log(this); // this 指向当前实例化后的对象
this.setState({ isHot: !this.state.isHot })
}
render() {
return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
}
}
ReactDOM.render(<Weather />, document.querySelector("#main"))
组件实例三大属性 props
1、props的基本使用
class Person extends React.Component {
render() {
return <h1 data-age={this.props.age} data-sex={this.props.sex}>{this.props.name}</h1>
}
}
const person = {
age: 18,
sex: "男"
}
ReactDOM.render(<Person name="杜恒" {...person} />, document.querySelector("#main"))
2、props属性限制
class Person extends React.Component {
/* 限制props传入的类型 */
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string
}
/* props未传的时候的默认值 */
static defaultProps = {
age: 18,
sex: "男"
}
render() {
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄：{this.props.age}</li>
<li>性别：{this.props.sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="杜恒" age={23} />, document.querySelector("#main"))
3、定义组件时，如果写了构造器，需要将props传递给父类，否则可能会出现找不到 this.props 的bug
class Person extends React.Component {
constructor() {
super()
console.log(this.props); // undefined
}
render() {
return <h1>{this.props.name}</h1>
}
}
4、函数式组件接收props
function Person(props) {
console.log(props);
return <h1>{props.name}</h1>
}
ReactDOM.render(<Person name="杜恒" />, document.querySelector("#main"))
组件实例三大属性 refs
1、字符串形式的 ref （已废弃）
class Test extends React.Component {
/* 点击显示左侧input的内容 */
showInputValue = () => {
console.log(this);
alert(this.refs.input.value)
}
showBlurInputValue = e => {
e.persist();
console.log(e);
alert(e.target.value)
}
render() {
return (
<ul>
<li>
<input ref="input" type="text" />
<button onClick={this.showInputValue}>点击显示左侧提示</button>
</li>
<li>
<input onBlur={this.showBlurInputValue} type="text" placeholder="失去焦点弹出提示" />
</li>
</ul>
)
}
}
2、回调函数形式的 ref
class Test extends React.Component {
showInputValue = () => {
console.log(this.input);
alert(this.input.value)
}
render() {
return (
<div>
<input ref={node => (this.input = node)} type="text" />
<button onClick={this.showInputValue}>点击显示左侧提示</button>
</div>
)
}
}
内联方式的ref里的回调函数，在更新状态的时候，会触发2次，第一次会得到null，第二次才得到当前的节点，如果想避免这个问题，可以将函数写成class的方式，上面的方式可以写成下面这种
class Test extends React.Component {
/* 点击显示左侧input的内容 */
showInputValue = () => {
console.log(this.input);
alert(this.input.value)
}
/* 保存input */
saveInputRef = (node) => {
this.input = node
}
render() {
return (
<div>
<input ref={this.saveInputRef} type="text" />
<button onClick={this.showInputValue}>点击显示左侧提示</button>
</div>
)
}
}
3、createRef 形式
class Test extends React.Component {
myRef = React.createRef()
/* 点击显示左侧input的内容 */
showInputValue = () => {
console.log(this.myRef);
alert(this.myRef.current.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" />
<button onClick={this.showInputValue}>点击显示左侧提示</button>
</div>
)
}
}
ReactDOM.render(<Test />, document.querySelector("#main"))
标签：语法,return,render,react,props,Test,console,jsx,class 来源： https://www.cnblogs.com/laowangblog/p/16502569.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。