React.js的元素渲染

• 1. 使用 ES6 类写法，用 this.props.属性名 来取值。
•  2. 可以多层 props 来传值，在 ReactDOM.render 定义属性值，传给调用方法 App，再在调用的ES6类调用中用

 

var myStyle = {color:'red',textAlign:'center'}

class Name extends React.Component {
  render() {
    return <h1 style={myStyle}>网站名称：{this.props.name}</h1>;
  }
}
class Url extends React.Component {
  render() {
    return <h1>网站地址：{this.props.url}</h1>;
  }
}
class Nickname extends React.Component {
  render() {
    return <h1>网站地址：{this.props.nickname}</h1>;
  }
}

function App(props) {
    return (
        <div>
            <Name name={props.name}/>
            <Url  url={props.url}/>
            <Nickname  nickname={props.nickname}/>
        </div>
    );
}

多个属性的传入注意不用逗号或分号隔开而是空格符隔开:

ReactDOM.render(
     <App name={"元素渲染"} url={"http://www.baidu.com"} nickname={"BaiDu"}/>,
    document.getElementById('example')
);