使用import導入其它文件中的component：
import React from 'react';
import CustomButton from './CustomButton';
可以使用dot-notation來引用component：
import React from 'react';
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;
}
自定義組件首字母必須大寫：
import React from 'react';
// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
return <hello toWhat="World" />;
}
可以通過變量引用組件：
// Wrong! JSX type can't be an expression.
return <components[props.storyType] story={props.story} />;
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
props默認為true：
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
使用spread語法來賦值，例如下面兩個段代碼效果是一樣的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
可以將函數作為children，通過props.children來引用：
// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i)); // 調用函數
}
return <div>{items}</div>;
}
function ListOfTenThings() {
return (
<Repeat numTimes={10}>
{(index) => <div key={index}>This is item {index} in the list</div>}
</Repeat>
);
}
React中什么是Uncontrolled Component？
好，這一節就到這里。后續我將介紹更多React技術細節，來慢慢解答上述問題。
想學計算機技術嗎？需要1對1專業級導師指導嗎？想要團隊陪你一起進步嗎?歡迎加我為好友！微信號：iTekka。
