與React.Component一起使用Object.assign

我將這個示例代碼放在一起，想知道爲什麼React拋出一個錯誤。我試圖將此解釋爲使用React.Component的後代的替代方法。與React.Component一起使用Object.assign

const App = ({children}) => (
    <div className="app"> 
    { children } 
    </div> 
); 

const Example = Object.assign(
    {}, 
    React.Component, 
    { 
    render() { 
     return (
     <h1>Does this work?</h1> 
    ); 
    } 
    } 
); 


ReactDOM.render(
    <App> 
    <Example /> 
    </App>, 
    document.querySelector('#target') 
);

來源

2017-01-23 RKichenama

的真正的問題是爲什麼你甚至預期它的工作。 'React.Component'是一個構造函數。如果你想擴展react組件，使用'class Example extends React.Component'。 – dfsq

關鍵是要遠離'createClass'並使用'Component'的類擴展來真正使用組合而不是繼承。通過擴展'React.Component'構造函數，您可以創建似乎不可避免的僞類的後代。我曾希望得到一個解釋，而不是框架不支持該功能。 – RKichenama

下面的工作沒有createClass或extends

const Example = (props, context) => Object.assign(
    {}, 
    Object.create(React.Component.prototype), 
    { 
    props, context, 
    state: {text: 'acutally'}, 
    render() { 
     return (
     <span>This {this.state.text} works</span> 
    ); 
    } 
    } 
)

來源

2017-01-23 18:23:04 RKichenama

什麼你要找的是傳統的（預ES6）語法：

const Example = React.createClass({ 
    render() { 
     return (
     <h1>Does this work?</h1> 
    ); 
    } 
    });

更多信息可以在documentation on using React without ES6找到。

來源

2017-01-23 15:51:17

你想要做的事情根本不應該工作。

您正在嘗試使用不支持的方式創建React組件。三種方法來創建一個適當的陣營組分與：

class MyComponent extends React.Component { //class implementation 
} 
let MyComponent = React.createClass({ // class implementation 
}); 
function MyCompent (props, context) { // component render method 
}

基本上它歸結爲：

聲明類（第一形式），其延伸React.Component。
從對象（第二種形式）創建一個類都返回某種「構造函數」對象。
實現渲染功能。

你給每一種形式作出反應，更新和渲染組件樹。

你所做的是試圖（我猜）創建一個React.Component的實例與Object.assign，然後將其傳遞給React渲染。

React不能這樣工作。相反，你可以給它一個「構造函數」（前2種形式），它實現了#render（）=> reactElement（一種返回React元素而不是組件的方法），或者傳遞一個也返回React元素的函數。

PS：要在不使用新創建一個類的實例，ES5介紹的Object.create：

var o = Object.create(proto); // o.__proto__ === proto 
// the returned object has the supplied arguments as prototype.

來源

2017-01-23 18:14:35 adz5A

與React.Component一起使用Object.assign

回答

相關問題