一下来源于菜鸟教学粘在这方便复习,原网站https://www.runoob.com/react/react-rendering-elements.html,如有侵权通知即刻删除。
改版写法:
1. 使用 ES6 类写法,用 this.props.属性名 来取值。
2. 可以多层 props 来传值,在 ReactDOM.render 定义属性值,传给调用方法 App,再在调用的ES6类调用中用 props.属性直接赋值过去。
var myStyle = {color:'red',textAlign:'center'}
class Name extends React.Component {. //定义组件Name
render() {
return <h1 style={myStyle}>网站名称:{this.props.name}</h1>; }}
class Url extends React.Component { //定义组件Url
render() {
return <h1>网站地址:{this.props.url}</h1>; }}
class Nickname extends React.Component { //定义组件Nickname
render() {
return <h1>网站地址:{this.props.nickname}</h1>; }}
function App(props) { //在函数App中调用组件,及组件的参数props
return (
<div>
<Name name={props.name}/>
<Url url={props.url}/>
<Nickname nickname={props.nickname}/>
</div>
);}
多个属性的传入注意不用逗号或分号隔开而是空格符隔开:
ReactDOM.render( //viewmodel模块渲染,渲染时执行函数app,并往函数app中传入多个参数
<App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
document.getElementById('example'));