react-from-zero/06-property-types.html at master · lex111/react-from-zero

53 lines (41 loc) · 2.37 KB

<!doctype html>

<title>06 Типы свойств - React с нуля</title>

// PropTypes были удалены из React 16 и вынесены в отдельный пакет

</script>

// Компоненты создаются для инкапсуляции того, что должно в итоге работать вместе

// из одного места и для повторного использования

// Для повторного использования требуется, чтобы пользователь компонента предоставил правильные свойства,

// чтобы мы могли определить тип каждого свойства и установить значения по умолчанию we

function MyComponent(props) {

return (

<h1>Привет, </h1>

<h2>{props.customData}</h2>

</div>

)

}

// Добавьте (функцию-)свойство propTypes в функцию-компонент,

// чтобы он мог проверить его свойства (элемента)

MyComponent.propTypes = {

// В React по умолчанию множество типов свойств, например, строка

customData: PropTypes.string,

}

// Добавье (функцию-)свойство defaultProps для установки значений по умолчанию,

// если пользователь ничего не передал

MyComponent.defaultProps = {

customData: "default",

className: "default-class",

}

// Этот компонент отобразит предупреждение в консоли, так как customData должен быть строкой

var reactElement = <MyComponent customData={123}/>

// А этот компонент будет использовать значения по умолчанию

reactElement = <MyComponent/>

var renderTarget = document.getElementById("app")

ReactDOM.render(reactElement, renderTarget)

</script>

Provide feedback