Использование Object.assign с React.Component

Я вытащил этот примерный код вместе и хотел узнать, почему React выдает ошибку. Я ударил стену, пытаясь объяснить это как альтернативу использованию потомков React.Component.Использование Object.assign с React.Component

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' является конструктором. Если вы хотите расширить компонент реагирования, используйте 'class Example expand React.Component'. – dfsq

Дело в том, чтобы отойти от 'createClass' и использовать расширения класса' Компонент', чтобы действительно использовать композицию вместо наследования. Расширяя конструктор '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 
}

В основном это сводится к тому:

объявляющего класса (1-я форма), которая проходит React.Component.
Создание класса из объекта (2-я форма) возвращает как-то объект-конструктор.
реализация функции рендеринга.

Вы даете каждой из этих форм Реагировать для обновления и рендеринга дерева компонентов.

Что вы делали, пытался (я думаю) создать экземпляр группы React.Component с Object.assign, а затем передать его в ответ на рендер.

Реакция не работает таким образом. Вместо этого вы даете ему либо «конструктор» (первые 2 формы), который реализует #render() => reactElement (метод, возвращающий элементы React, а не компоненты), или вы передаете ему функцию, которая также возвращает React Elements.

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

Использование Object.assign с React.Component

ответ

Смежные вопросы