react组件三大属性（react组件的类型）

科技前沿 • 2025-05-31 14:57 • 阅读 47

大家好，我是讯享网，很高兴认识大家。

&lt;!DOCTYPE html&gt;
&lt;html lang=“en”&gt;
&lt;head&gt;

讯享网

讯享网&lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;title&gt;Document&lt;/title&gt;

</head> <body>

讯享网

&lt;div id="test1"&gt;&lt;/div&gt; &lt;div id="test2"&gt;&lt;/div&gt; &lt;script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"&gt;&lt;/script&gt; &lt;script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"&gt;&lt;/script&gt; &lt;script src="https://www.cnblogs.com/panghexin/js/prop-types.js"&gt;&lt;/script&gt; &lt;script type="text/babel"&gt; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 1、定义组件:方式1</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Person(props) { </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> ( </span>&lt;ul&gt; &lt;li&gt;name：{props.name}&lt;/li&gt; &lt;li&gt;age：{props.age}&lt;/li&gt; &lt;li&gt;sex：{props.sex}&lt;/li&gt; &lt;/ul&gt;

)

讯享网} </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">方式2：使用类方式定义组件（运行时请将其中一个方式注释）</span>

class Person extends React.Component {

 render() { </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> ( </span>&lt;ul&gt; &lt;li&gt;name：{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.name}&lt;/li&gt; &lt;li&gt;age：{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.age}&lt;/li&gt; &lt;li&gt;sex：{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.sex}&lt;/li&gt; &lt;/ul&gt;

)

讯享网 } } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定默认值</span> Person.defaultProps =<span style="color: rgba(0, 0, 0, 1)"> { name:</span>'imaginecode'<span style="color: rgba(0, 0, 0, 1)">, age: </span>17<span style="color: rgba(0, 0, 0, 1)">, sex:</span>'woman'<span style="color: rgba(0, 0, 0, 1)"> } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定属性值的类型和必要性--使用prop-types.js库</span> Person.propTypes =<span style="color: rgba(0, 0, 0, 1)"> { name:PropTypes.string.isRequired, age:PropTypes.number.isRequired, } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 2、渲染组件标签</span> const p1 =<span style="color: rgba(0, 0, 0, 1)"> { name:</span>'imaginecode'<span style="color: rgba(0, 0, 0, 1)">, age: </span>19<span style="color: rgba(0, 0, 0, 1)">, sex:</span>'man'<span style="color: rgba(0, 0, 0, 1)"> } ReactDOM.render(</span>&lt;Person name={p1.name} age={p1.age} sex={p1.sex} /&gt;,document.getElementById('test1')); <span style="color: rgba(0, 0, 0, 1)"> const p2 </span>=<span style="color: rgba(0, 0, 0, 1)"> { name:</span>'imaginecode2'<span style="color: rgba(0, 0, 0, 1)"> } ReactDOM.render(</span>&lt;Person name={p2.name}/&gt;,document.getElementById('test2')); &lt;/script&gt;

</body> </html>

react组件三大属性（react组件的类型）

相关推荐