https://facebook.github.io/react/docs/react-component.html#setstate
this.props是自己的特有属性，props除了包含自己所有的属性，还包含从父级组件继承的属性
class components props & this.props.onClickFunction
function components (props) & no need this
// https://facebook.github.io/react/docs/react-component.html#setstate
// class props & this.props.onClickFunction
class PropsTest extends React.Component{
render() {
return (
<div>
<button onClick={this.props.onClickFunction} >
Add counter
</button>
<p>
this state is
<span
style={{color: "#0ff", fontSize: "32px"}}
>
{this.props.counter}
</span>
</p>
</div>
);
};
};
// function props & no need this
const Test = (props) =>{
return (
<div>
<button onClick={props.onClickFunction} >
Add `props` counter
</button>
<p
style={{color: "#0ff", fontSize: "32px"}}
>
{props.counter}
</p>
</div>
);
};
class App extends React.Component{
state = {
counter: 1
};
addCounter = () => {
this.setState(
(prevState) => (
{
counter: prevState.counter + 1
}
)
);
};
render(){
return(
<div>
<PropsTest
onClickFunction={this.addCounter}
counter={this.state.counter}
/>
<Test
onClickFunction={this.addCounter}
counter={this.state.counter}
/>
</div>
);
}
}
export default App;
const props = {
name: "xgqfrms",
age: 17
};
ReactDOM.render(
<div>
<App {...props}/>
</div>
, mountNode
);
React 父子组件之间 通信
子组件（props）使用props.counter 访问state
父组件 class 中间使用 this.state.counter 访问state
{this.props.counter}
{props.counter}