React component
In this section we will discuss how to use components to make our application easier to manage.
Next, let’s package an output “Hello World!” Component named HelloMessage :
React instance
functionHelloMessage(props){return<h1>HelloWorld!</h1>;}constelement=
<HelloMessage/>;ReactDOM.render(element,document.getElementById('example'));
Instance resolution:
1.We can use the function to define a component:
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
You can also use ES6 class to define a component:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
2、 const element = <HelloMessage /> 为用户自定义的组件。
Note that native HTML element names start with lowercase letters, while custom React class names start with uppercase letters, such as HelloMessage can’t be written as helloMessage . In addition, it is important to note that the component class can only contain a top-level tag, otherwise an error will also be reported.
If we need to pass parameters to the component, we can use the this.props object. An example is as follows:
React instance
functionHelloMessage(props){return<h1>Hello{props.name}!</h1>;}constelement=
<HelloMessagename="Runoob"/>;ReactDOM.render(element,document.getElementById('example'));
In the above example name property through the props.name to get.
Note that when adding attributes, the class attribute needs to be written as className , and the for attribute needs to be written as htmlFor because’ class’ and for are reserved words in JavaScript.
Composite component
We can synthesize a component by creating multiple components, that is, separating the different function points of the component.
In the following example, we implement a component that outputs the name and URL of the website:
React instance
functionName(props){return<h1>Site Name：{props.name}</h1>;}functionUrl(props){return<h1>
Website address：{props.url}</h1>;}functionNickname(props){return<h1>
Website nickname：{props.nickname}</h1>;}functionApp(){return(<div>
<Namename="Rookie Tutorial"/> <Urlurl="http://www.runoob.com"/>
<Nicknamenickname="Runoob"/>
</div>);}ReactDOM.render(<App/>,document.getElementById('example'));
The App component in the instance uses the Name 、 Url and Nickname component to output the corresponding information.