React 组件

React 组件

我们封装一个输出 "Hello World！" 的组件，组件名为 SayHelloWorld：

function SayHelloWorld(props) {

　　return <h1>Hello World!</h1>;

}

const element = <SayHelloWorld />;

ReactDOM.render( element, document.getElementById('example') );

1、我们可以使用函数定义了一个组件：

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

2、const element = <SayHelloWorld /> 为用户自定义的组件。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 SayHelloWorld 不能写成 sayHelloWorld。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

function HelloMessage(props) {

　　return <h1>Hello {props.name}!</h1>;

}

const element = <HelloMessage name="Runoob"/>;

ReactDOM.render( element, document.getElementById('example') );

以上实例中 name 属性通过 props.name 来获取。

 

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

function Name(props) {

　　 return <h1>网站名称：{props.name}</h1>;

}

function Url(props) {

　　return <h1>网站地址：{props.url}</h1>;

}

function Nickname(props) {

　　return <h1>网站小名：{props.nickname}</h1>;

}

function App() {

　　return (<div> <Name name="菜鸟教程" /> <Url url="http://www.runoob.com" /> <Nickname nickname="Runoob" /> </div> );

}

ReactDOM.render( <App />, document.getElementById('example') );

 

注意：

1、组件名不一定是用单标签，也可以是双标签

2、XML 的重点有且仅有一个根标签。

3、组件名内不能使用 style 样式，例如：假设该组建名为 <HelloMessage />，如果我们写成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中

 

ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(template,targetDOM) 方法接收两个参数：

•  第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如 <div>；
•  第二个参数是插入该模板的目标位置。

若要为创建的某个元素增加 class 属性，不能直接定义 class 而要用 className，因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式：

<input type="text" className="userName" value={value}/> 
.userName{background: yellow} // 在CSS样式中定义

同样可以定义行内样式，将所有的样式包裹在一个对象中，以类似变量的形式给 style 属性赋值，注意样式属性要用驼峰命名法表示，如: backgroundColor 而不是 background-color，fontSize 而不是 font-size：

<input type="text" style={{backgroundColor:"yellow",color:"red"}} value={value}/>