屬性展開
如果你已經(jīng)有了一個 props 對象对途，你可以使用展開運算符 ...來在 JSX 中傳遞整個 props 對象俺附。以下兩個組件是等價的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
你還可以選擇只保留當前組件需要接收的 props，并使用展開運算符將其他 props 傳遞下去。
const Button = props => {
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;
};
const App = () => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked!")}>
Hello World!
</Button>
</div>
);
};
在上述例子中，kind 的 prop 會被安全的保留垢揩，它將不會被傳遞給 DOM 中的 <button> 元素。 所有其他的 props 會通過 ...other 對象傳遞敛瓷，使得這個組件的應(yīng)用可以非常靈活叁巨。你可以看到它傳遞了一個 onClick 和 children 屬性。
屬性展開在某些情況下很有用呐籽，但是也很容易將不必要的 props 傳遞給不相關(guān)的組件锋勺，或者將無效的 HTML 屬性傳遞給 DOM。我們建議謹慎的使用該語法狡蝶。
JSX 中的子元素
在開始和結(jié)束標簽之間的 JSX 表達式庶橱，將作為特定屬性 props.children 傳遞給外層組件。
