Как определить PropTypes для стиля атрибута в Reactjs

Я хочу передать атрибут style в свой компонент с использованием синтаксиса JSX.

<InputTextWithValidation id = "name" 
                         style = {{width:'100%'}} .../>

Как мне определить в моем компоненте InputTextWithValidation PropTypes? Я пробовал либо как объект, либо как строку, например.

InputTextWithValidation.propTypes = {
         style:PropTypes.object, ...
   }

но результат был таким же: Предупреждение на консоли Chrome:

Failed prop type: Invalid prop `style` of type `object` supplied to `InputTextWithValidation`, expected `string`.

javascript reactjs react-proptypes

08.06.2018 01:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 642

Ответы 1

Убедитесь, что вы объявляете опору стиля только один раз. Даже если мне нужно больше кода, чтобы понять, в чем проблема, я решил создать для вас jsfiddle.

Как вы можете видеть, класс Hello отображает InputTextWithValidation с опорой стиля, которая содержит объект:

style = {{width:'100%', background:'red'}}

Проверьте код ниже, вы можете запустить фрагмент кода.

class InputTextWithValidation extends React.Component{
	render(){
  	return(
    	<input id = {this.props.id} style = {this.props.style}/>
    );
  }
}

InputTextWithValidation.propTypes = {
  style:PropTypes.object
}


class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name} <InputTextWithValidation id = "name" style = {{width:'100%', background:'red'}}/></div>;
  }
}

ReactDOM.render(
  <Hello name = "World" />,
  document.getElementById('container')
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Спасибо, ваш пример исчерпывающий.

— 08.06.2018 15:48

08.06.2018 09:41