當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react设置默认props

發布時間：2023/12/31 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 react设置默认props 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一般設置props的默認值有兩種方式，下面通過一個例子說明一下。

<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>React表單</title><script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">class Greeting extends React.Component {//方法一：指定 props 的默認值，這個方法只有瀏覽器編譯以后才會生效static defaultProps = { age: 18}render() {return (<h1>Hello, {this.props.name}. and my age is {this.props.age}</h1>);}}// 方法二：指定 props 的默認值，這個方法會一直生效Greeting.defaultProps = { name: '我是props的默認值！'};ReactDOM.render(<Greeting />,document.getElementById('example'));</script></body> </html>

第一種方式：

React 組件類中聲明 defaultProps 作為靜態屬性。

第二種方式：

通過賦值特定的 defaultProps 屬性為 props 定義默認值：

總結

以上是生活随笔為你收集整理的react设置默认props的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

props
React