Создание компонента в Reactjs с ES6

Например создание этого компонента в Reactjs, поскольку он был бы с EcmaScript6?

var HelloWorldComponent = React.createClass({
    render: function() {
        return <div className="message">Hello World! </div>
    }
})
6
задан 10.06.2016, 19:17
4 ответа

AsГ - его было бы

import React from 'react';

class HelloWorldComponent extends React.Component {
    render() {
        return <div className="message">Hello World! </div>;
    }
}
3
ответ дан 24.11.2019, 14:11

Другая форма, которая у тебя есть, чтобы создавать компонент stateless или "без состояния" - следующая:

import React from 'react'

export default function HelloWorldComponent () {

  return ( <div className="message">Hello World! </div> )

}
3
ответ дан 24.11.2019, 14:11

Здесь ты должен иметь в виду, как это будет осуществление твоего компонента.

Пример, который ты описываешь, - то, что известно в react как компонент презентации, из-за которого ты можешь использовать класс со строителем только. Даже ты не должен получать в наследство React.Component

import React from 'react';

class HelloWorldComponent {
  constructor() {
    return <div className="message">Hello World! </div>;
  }
}

export default HelloWorldComponent;

Это переводится в

var HelloWorldComponent = function() {
    return <div className="message">Hello World! </div>;
}

Что sintáxis, вынесенный из-за react

Есть еще более простой sintáxis, который используя arrow functions

var HelloWorldComponent = () =>  {
    return <div className="message">Hello World! </div>;
};

export default HelloWorldComponent;

Всегда остается традиционный выбор

import React from 'react';

class HelloWorldComponent extends React.Component {
    render() {
        return <div className="message">Hello World! </div>;
    }
}

export default HelloWorldComponent;

Что главным образом делает то же самое, что и все предыдущее, но с больше кодом и тяжелее для того, чтобы читать.

В случае, который был бы составляющим контейнером, важно, чтобы ты понял, что React.createClass он не ведет себя точно равно как extends React.Component. В этом случае ты должен звонить в super(props) в строителе и уже ты не нуждаешься в том, чтобы позвонить в componentWillMount так как строитель - управляющий этого шага.

import React from 'react';
import Foo from './Foo'
import Bar from './Bar'

class HelloWorldComponent extends React.Component {
    constructor(props) {
        super(props);
        // Aquí pones todo lo que usualmente pondrías en componentWillMount
    }

    render() {
        return (
            <Foo />
            <Bar />
        );
    }
}

export default HelloWorldComponent;

В ES5 функция React.createClass он поручает себе, что стоимость this будьте правильный в методах твоего компонента, однако extends React.Component он не делает это равным, которым ты имеешь два выбора

  1. Ручной Binding

    import React from 'react';
    import Foo from './Foo'
    import Bar from './Bar'
    
    class HelloWorldComponent extends React.Component {
        constructor(props) {
            super(props);
            this.metodo = this.metodo.bind(this);
        }
    
        metodo() {
            //haz algo con this
        }
    
        render() {
            return (
                <Foo />
                <Bar />
            );
        }
    }
    
    export default HelloWorldComponent;
    
  2. Arrow functions

    import React from 'react';
    import Foo from './Foo'
    import Bar from './Bar'
    
    class HelloWorldComponent extends React.Component {
        constructor(props) {
            super(props);
        }
    
        metodo = () => {
            //haz algo con this
        }
    
        render() {
            return (
                <Foo />
                <Bar />
            );
        }
    }
    
    export default HelloWorldComponent;
    

Ты можешь читать больше о двух типах компонентов в простых и умных компонентах и большей информации о том, что ты должен иметь в виду, когда ты используешь React и ES6.

2
ответ дан 24.11.2019, 14:11

С ES6 ты, должно быть, увеличиваешь Component. Твой пример в ES6 - asГ-:

import React from 'react';

class HelloWorldComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='message'>Hello world!!</div>
        );
    }
}
1
ответ дан 24.11.2019, 14:11
  • 1
    что-то, что не было бы только серьезная export default HelloWorldComponent; – wootsbot 02.08.2017, 18:37