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 1.We can use the function to define a component: You can also use ES6 class to define a component: 2、 Note that native HTML element names start with lowercase letters, while custom React class names start with uppercase letters, such as If we need to pass parameters to the component, we can use the In the above example Note that when adding attributes, the 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: The App component in the instance uses the
HelloMessage
: 3.5.1. React instance ¶
functionHelloMessage(props){return<h1>HelloWorld!</h1>;}constelement=
<HelloMessage/>;ReactDOM.render(element,document.getElementById('example'));
Instance resolution: ¶
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
const
element
=
<HelloMessage
/>
为用户自定义的组件。
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.
this.props
object. An example is as follows: 3.5.2. React instance ¶
functionHelloMessage(props){return<h1>Hello{props.name}!</h1>;}constelement=
<HelloMessagename="Runoob"/>;ReactDOM.render(element,document.getElementById('example'));
name
property through the
props.name
to get.
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 ¶
3.5.3. 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'));
Name
、
Url
and
Nickname
component to output the corresponding information.