认识组件
react组件使用
import NameCard from './components/NameCard.js';
class App extends Component {
constructor(props){
super(props);
this.state = {
obj:{
name:'std',
number:123,
}
}
}
render() {
return (
<div className="App">
<NameCard content={
this.state.obj}></NameCard>
</div>
);
}
}
NameCard组件:
render(){
return (
<div>
<h4>{
this.props.content.name}</h4>
<ul>
<li>电话:{
this.props.content.number}</li>
</ul>
</div>
)
}
组件的写法有多种,
NameCard组件写法1:
return (
<div>
<h4>{this.props.content.name}</h4>
<ul>
<li>电话:{this.props.content.number}</li>
</ul>
</div>
)
NameCard组件写法2:
return React.createElement('div',{
className: 'shopping-list'},
React.createElement('h4',),
React.createElement('ul',null,
React.createElement('li',null,'hello world')
),
);
使用JSX编写的代码都会被转换成使用React.createElement()的形式。
状态提升
思路就是子组件通过调用父组件传递的props事件,并且往里传值,父组件接收子组件传递进来的值,并做统一赋值处理,做到子组件间响应与更新同一值。
下面是案例
App.js
<div className="App">
<AllInput></AllInput>
</div>
AllInput组件:
import React from 'react';
import Input from './input.js';
class AllInput extends React.Component {
constructor(props) {
super(props)
this.state = {
content: '' }
this.handleContentChange = this.handleContentChange.bind(this)
}
handleContentChange(newContent) {
this.setState({
content: newContent })
}
render() {
return (
<div>
<Input content={
this.state.content } onContentChange={
this.handleContentChange }/>
<br /><br />
<Input content={
this.state.content } onContentChange={
this.handleContentChange }/>
</div>
)
}
}
export default AllInput;
Input组件
import React from 'react';
class Input extends React.Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.props.onContentChange(e.target.value)
}
render() {
return (
<input type='text' value={
this.props.content } onChange={
this.handleChange } />
)
}
}
export default Input;