Meteor React — Почему компоненты React определены по-разному в React Mounter и React Layout от Kadira?

Я с нетерпением жду Meteor 1.3, чтобы я мог импортировать компоненты React вместо того, чтобы использовать их как глобальные.

Следовали этому руководству (https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1), и я заметил, что мне придется использовать React-mounter вместо React-Layout от Kadira.

В этих документах здесь:

https://github.com/kadirahq/react-mounter

Я вижу, что компоненты React определены так:

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);

Вместо чего-то вроде этого

MainLayout = React.createClass({
  propTypes: {
    content: React.PropTypes.element
  },
  render() {
    return (
      <div>
        <header>
          This is our header
        </header>
        <main>
          {this.content}
        </main>
      </div>
    );
  }
});

Не могли бы вы помочь мне объяснить, что здесь происходит? И как мне использовать этот новый стиль? Где определить все свойства, методы, примеси и т. д.?

Также в качестве побочного вопроса я заметил, что React был добавлен как пакет npm вместо использования Meteor add react. Это то, как мы должны теперь реагировать?


reactjs meteor meteor-react
person Nearpoint    schedule 15.02.2016    source источник
comment
да, вы можете использовать реакцию с метеором только с помощью npm. Просто убедитесь, что вы добавили метеорный пакет response-data. затем вы можете удалить реакцию и просто использовать модуль реакции npm es6 в своем приложении. Вы просто импортируете его.   -  person Nearpoint    schedule 16.02.2016

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете разделить свои компоненты на два типа: контейнеры и презентационные компоненты.

Дополнительные сведения см. в этом.

React v0.14 представил нечто под названием функциональные компоненты, которые представляют собой компоненты представления, созданные с помощью функции, а не экземпляра класса. Поскольку они являются презентационными компонентами, они не предназначены для дополнительных методов или примесей или чего-то еще, они просто отображают данные.

Если вы хотите придерживаться React v0.14 и ES2015, вы можете создавать свои компоненты, например

class Component extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.data.bar);
  }
  render() {
    return <div>Bar {this.props.data.bar}!</div>;
  }
}

Теперь у вас есть полноценный компонент, который может иметь состояние, другие обработчики событий и другие методы.

Здесь очень важно отметить, что синтаксис ES2015 не допускает миксинов, потому что они предпочитают наследование или функциональную композицию.

Надеюсь, это поможет!

Извините, я не могу помочь вам с вашим побочным вопросом, я не использовал React с Meteor.

person nbermudezs    schedule 15.02.2016