reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
生活随笔
收集整理的這篇文章主要介紹了
reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
props基本使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>props基本使用</title> </head> <body><!-- 準備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//創建組件class Person extends React.Component{render(){// console.log(this);const {name,age,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age+1}</li></ul>)}}//渲染組件到頁面ReactDOM.render(<Person name="jerry" age={19} sex="男"/>,document.getElementById('test1'))ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))const p = {name:'老劉',age:18,sex:'女'}// console.log('@',...p);// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))</script> </body> </html>對props進行限制
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>對props進行限制</title> </head> <body><!-- 準備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//創建組件class Person extends React.Component{render(){// console.log(this);const {name,age,sex} = this.props//props是只讀的//this.props.name = 'jack' //此行代碼會報錯，因為props是只讀的return (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age+1}</li></ul>)}}//對標簽屬性進行類型、必要性的限制Person.propTypes = {name:PropTypes.string.isRequired, //限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number,//限制age為數值speak:PropTypes.func,//限制speak為函數}//指定默認標簽屬性值Person.defaultProps = {sex:'男',//sex默認值為男age:18 //age默認值為18}//渲染組件到頁面ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))const p = {name:'老劉',age:18,sex:'女'}// console.log('@',...p);// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))function speak(){console.log('我說話了');}</script> </body> </html>props的簡寫方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>props的簡寫方式</title> </head> <body><!-- 準備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//創建組件class Person extends React.Component{constructor(props){//構造器是否接收props，是否傳遞給super，取決于：是否希望在構造器中通過this訪問props// console.log(props);super(props)console.log('constructor',this.props);}//對標簽屬性進行類型、必要性的限制static propTypes = {name:PropTypes.string.isRequired, //限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number,//限制age為數值}//指定默認標簽屬性值static defaultProps = {sex:'男',//sex默認值為男age:18 //age默認值為18}render(){// console.log(this);const {name,age,sex} = this.props//props是只讀的//this.props.name = 'jack' //此行代碼會報錯，因為props是只讀的return (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age+1}</li></ul>)}}//渲染組件到頁面ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))</script> </body> </html>函數式組件使用props
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>函數組件使用props</title> </head> <body><!-- 準備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//創建組件function Person (props){const {name,age,sex} = propsreturn (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age}</li></ul>)}Person.propTypes = {name:PropTypes.string.isRequired, //限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number,//限制age為數值}//指定默認標簽屬性值Person.defaultProps = {sex:'男',//sex默認值為男age:18 //age默認值為18}//渲染組件到頁面ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))</script> </body> </html>總結
以上是生活随笔為你收集整理的reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： reactjs中的事件处理
- 下一篇： reactjs定义组件：类式组件