如何設置狀態與react.js ES6道具

道具參數

前：

const MyComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     name: this.props.name || 'Initial data...' 
    }; 
    } 
});

現在我努力做到這一點，this.props不存在：

class MyComponent extends React.Component { 
    constructor() { 
    super() 
     this.state = { name: this.props.name || 'Joseph Flowers' }; 
    } 
}

來源

2016-09-14 Joseph Flowers

其實，你不需要一個有狀態的組件來完成你想要做的事情（反模式：https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html）。

相反，另一種更簡單，更好的解決方案：

class MyComponent extends React.PureComponent { 

    static propTypes = {   // <- This is not related to your question 
     name: PropTypes.string,  // but always declare your propTypes :-) 
    } 

    static defaultProps = {   // <- React provides defaultProps specifically 
     name: 'Joseph Flowers',  // for your use case ! 
    } 
}

來源

2016-09-14 07:05:05 Jalil

你好@jail我試圖實現你的解決方案，但是跳出一個錯誤：static defaultProps = {'> 4 |靜態defaultProps = { |^ 5 | \t名稱：'默認名稱...' 6 | };'node - version - > v6.3.1 –

@Jail，你爲什麼使用React.PureComponent？ –

對不起@Jail其他問題...我如何驗證props.name是否不是空字符串？導致其他componente發送和空字符串，但在這種情況下，我想設置默認值爲例如this.props.name ===''？ ''this.props.name：'默認值' –

你只需要通過道具參數的構造方法：

import React from 'react'; 

class MyComponent extends React.Component { 
    constructor(props) { // <-- this parameter 
     super(props) 
     this.state = { 
      name: props.name || 'Joseph Flowers' // <-- then used like this 
     }; 
    } 
}

注意，在某些情況下，它不是一個反模式：如果您想設置你必須默認屬性聲明毗鄰類聲明的

(For more complex logic, simply isolate the computation in a method.)

However, it's not an anti-pattern if you make it clear that the prop is only seed data for the component's internally-controlled state: Source: https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

BTW爲ES6：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class MyComponent extends React.Component { 

    /** 
    This is the ES7 way to use 
    static propTypes = {    
     name: React.PropTypes.string, 
    } 

    static defaultProps = {   
     name: 'My default value using ES7' 
    } 
    */ 

    constructor(props) { 
     super(props) 
     // this still could be the best solutions in cases 
     // of the unexpected values in the props sent 
     // for the out side component 
     this.state = { 
      name: props.name && props.name !== '' ? props.name :'Joseph Flowers'; 
     }; 
    } 
} 

// This is the ES6 way to use 
MyComponent.propTypes = { 
    name: React.PropTypes.string 
} 

MyComponent.defaultProps = { 
    name: 'My default value' 
} 

ReactDOM.render(<MyComponent name="" />, document.getElementById('my-container-id'));

來源

2016-09-14 06:24:22 gsalgadotoledo

感謝您的快速回答，解決了相當不錯！ –

雖然......如果props.name發生變化，它不會反映在你的狀態......這是反模式，除非你將你的道具名稱改爲'initialName'，但是這種情況下，你不需要硬編碼另一個... 更多信息：https：//facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html – Jalil

@Jalil感謝您的警告，設置' const'組件值可能是一個很好的解決方案 – gsalgadotoledo

可以爲無狀態組件

const MyComponent = (props) => { 
return <div>Hi {props.name || 'Joseph Flowers'}! </div> 
}

來源

2016-09-15 01:41:57

在ES7可以初始化這樣的狀態下做到這一點。

class App extends React.Component { 
    static propTypes = { 
     title: React.PropTypes.string.isRequired, 
    } 

    // or pass from parent Componet 
    static defaultProps = { 
     title: 'hello', 
    } 

    state = { 
     title: this.props.title 
    } 
    // ... 
}

來源

2017-07-15 10:38:18

如何設置狀態與react.js ES6道具

回答

相關問題