Начал работат с данной библиотекой Использую ES6. Наткнулся на такой компонент:
import * as React from 'react';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
const DayPickerStrings: IDatePickerStrings = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year'
};
export interface IDatePickerBasicExampleState {
firstDayOfWeek?: DayOfWeek;
}
export class DatePickerBasicExample extends React.Component<any, IDatePickerBasicExampleState> {
public constructor() {
super();
this.state = {
firstDayOfWeek: DayOfWeek.Sunday
};
}
public render() {
let { firstDayOfWeek } = this.state;
return (
<div>
<DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
<Dropdown
label='Select the first day of the week'
options={ [
{
text: 'Sunday',
key: DayOfWeek[DayOfWeek.Sunday]
},
{
text: 'Monday',
key: DayOfWeek[DayOfWeek.Monday]
},
{
text: 'Tuesday',
key: DayOfWeek[DayOfWeek.Tuesday]
},
{
text: 'Wednesday',
key: DayOfWeek[DayOfWeek.Wednesday]
},
{
text: 'Thursday',
key: DayOfWeek[DayOfWeek.Thursday]
},
{
text: 'Friday',
key: DayOfWeek[DayOfWeek.Friday]
},
{
text: 'Saturday',
key: DayOfWeek[DayOfWeek.Saturday]
}
] }
selectedKey={ DayOfWeek[firstDayOfWeek] }
onChanged={ this._onDropdownChanged.bind(this) }
/>
</div>
);
}
private _onDropdownChanged(option: IDropdownOption) {
this.setState({
firstDayOfWeek: DayOfWeek[option.key]
});
}
}
Увидел слова interface
, private
,public
. Прогугглив, понял,что это-TypeScript
. Попытался найти какой-нибудь трашпиллер, но в данном случае имеем не просто js, а react. Подскажите пожалуйста как это дело можно перевести в обычный es6?
Интерфейсы и модификаторы приватности в TypeScript просто декоративны, и проверяются только компилятором.
Для перевода данного кода в ES6 нужно просто убрать то, чего еще нет:
В итоге получится что-то вроде:
import * as React from 'react';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { DatePicker, DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';
const DayPickerStrings = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year'
};
export class DatePickerBasicExample extends React.Component {
constructor() {
super();
this.state = {
firstDayOfWeek: DayOfWeek.Sunday
};
}
render() {
let { firstDayOfWeek } = this.state;
return (
<div>
<DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
<Dropdown
label='Select the first day of the week'
options={ [
{
text: 'Sunday',
key: DayOfWeek[DayOfWeek.Sunday]
},
{
text: 'Monday',
key: DayOfWeek[DayOfWeek.Monday]
},
{
text: 'Tuesday',
key: DayOfWeek[DayOfWeek.Tuesday]
},
{
text: 'Wednesday',
key: DayOfWeek[DayOfWeek.Wednesday]
},
{
text: 'Thursday',
key: DayOfWeek[DayOfWeek.Thursday]
},
{
text: 'Friday',
key: DayOfWeek[DayOfWeek.Friday]
},
{
text: 'Saturday',
key: DayOfWeek[DayOfWeek.Saturday]
}
] }
selectedKey={ DayOfWeek[firstDayOfWeek] }
onChanged={ this._onDropdownChanged.bind(this) }
/>
</div>
);
}
_onDropdownChanged(option) {
this.setState({
firstDayOfWeek: DayOfWeek[option.key]
});
}
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Хочу сделать сайт, на котором будет карта местности (изображение), которую можно будет двигать, нажимая и двигая мышку и увеличивать и уменьшать...
Можно ли методу alert присвоить id? Суть такая,нужно,чтобы перекидывало на другую страницу,только при условии,если данные были верно введеныНо...
здравствуйте, можете посоветовать готовый класс/функцию для распознавания текста с картинки?