陣營isValidElement出來是假

下面是一個簡單的例子：陣營isValidElement出來是假

const Foo =() => { 
    return (
    <div>foo</div> 
); 
} 

class Bar extends React.Component { 
    render() { 
    return (
     <div>bar</div> 
    ) 
    } 
} 

console.log(React.isValidElement(Foo)); 
console.log(React.isValidElement(Bar));

這兩個返回false。這是爲什麼？

來源

2017-09-26 Kousha

組件！=元素。一個元素基本上是「實例化」（也不是真的，不確定正確的術語是什麼）組件的結果。嘗試'console.log（React.isValidElement（））;'。基本上，當你調用'React.createElement（Foo）'時，你會得到一個元素，這就是''正在做的事情。 –

@FelixKling啊有道理。謝謝！如果答案很簡單，我還有其他問題，否則我會創建一個單獨的問題。我如何克隆'Foo'或'Bar'並將其他道具傳遞給？ 'React.cloneElement'返回錯誤 – Kousha

我不確定你試圖達到什麼目的。您可以根據需要將盡可能多的道具傳遞給組件。但是該組件可能只會訪問它所知道的組件。所以當你說你想傳遞額外的道具時，我假設你想以某種方式訪問它們。但是這基本上意味着要改變函數/組件的實現，所以我不知道「克隆」組件會完全做什麼。也許你可以爲你的用例提供一個更好的例子？ –

Component != Element

Foo和Bar是部件。元素基本上是「實例化」（也不是真的，不確定正確的術語是什麼）組件的結果。這是一個構造函數/函數/字符串（用於HTML組件），道具和兒童的組合。

當你致電React.createElement(Foo)時，你會得到一個元素，這是<Foo />正在做的事情。

const Foo =() => { 
 
    return (
 
    <div>foo</div> 
 
); 
 
} 
 
console.log(React.isValidElement(<Foo />)); 
 
console.log(<Foo bar={42} />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

來源

2017-09-26 18:04:25

陣營isValidElement出來是假

回答

相關問題