Question

我想使用JSX语法将'style'属性传递给我的组件。

<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`.

Answer 1

确保您只声明一次样式道具。即使我需要更多代码来了解问题所在，我决定为您创建jsfiddle。

正如您所看到的，Hello类使用包含对象的样式prop呈现InputTextWithValidation：

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

检查下面的代码，您可以运行代码段。

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

如何在Reactjs中为属性样式定义PropTypes

1 个答案: