Как вы даете компонентам имя в реакции?

Question

Когда я отлаживаю консоль консоли браузера или реагирую на инструменты разработчика, они всегда ссылаются на мои компоненты как «Конструктор», и я хотел бы это изменить. Смотрите пример ниже:

я бы надеялся установить определенные имена для своих компонентов, чтобы они бы как «MyComponent», например. Это поможет на страницах, где есть много компонентов, и один из них бросает предупреждение, которое я хотел бы решить.

Answer 1

displayName Добавьте свойство к компонентам:

var Component = React.createClass({ 
    displayName: 'MyComponent', 
    ... 
}); 

Answer 2

Вам не нужно, чтобы установить displayName свойство к компонентам на самом деле. Он автоматически устанавливается.

Но есть определенные случаи, которые вам нужно учитывать.

.Вы положить компонент в отдельном файле и содержимое этого файла -

export default React.createClass({ 
    render: function() { 
    return <h1>Hello, {this.props.name}</h1>; 
    } 
}); 

В этом случае displayName будет undefined.

. Вы назначили компонент в переменной.

var TestComponent = React.createClass({ 
    render: function() { 
    return <h1>Hello, {this.props.name}</h1>; 
    } 
}); 

Теперь displayName установлен в TestComponent.

См. Соответствующий jsx конверсия для уточнения.

var TestComponent = React.createClass({ 
    displayName: "TestComponent", 

    render: function render() { 
    return React.createElement(
     "h1", 
     null, 
     "Hello, ", 
     this.props.name 
    ); 
    } 
}); 

Если вы используете ES6 например

class HelloMessage extends React.Component { 
    render() { 
     return <div > Hello component { 
     } < /div>; 
    } 
} 

В этом случае displayName будет имя класса, который вы дали HelloMessage то есть.