Reactjs 如何在react.js ES6中使用道具设置状态

我想知道，如何使用ES6设置带有props参数的状态

之前：

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

---

您只需在构造函数方法中传递props参数：

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

从“React”导入React；
类MyComponent扩展了React.Component{
构造函数（props）{/实际上，您不需要一个状态完整的组件来完成您要做的事情（反模式：）

相反，另一个更简单、更好的解决方案：

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

类MyComponent扩展了React.PureComponent{
静态propTypes={/您可以对无状态组件执行此操作

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

const MyComponent=（道具）=>{
返回Hi{props.name | | |'约瑟夫·弗劳尔斯'}！
}
在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
    }
    // ...
}

谢谢你的快速回答，结果还算不错！！不过要小心…如果props.name更改，它不会反映在你的状态中…这是反模式的，除非你将prop name更改为'initialName'，但在这种情况下，你不需要硬编码另一个…更多信息：@Jalil感谢警告，设置'const'组件值这是一个很好的解决方案并没有让你们明白…你们在说什么？你们是对的，但若你们只需要用道具设置状态（例如一个ajax REST url或其他不会改变的东西）有一次，在构造函数中设置状态可能是一个很好的解决方案，你不认为吗？Hello@jail我正在尝试实现你的解决方案，但跳过了一个错误：static defaultProps={
>4 | static defaultProps={^5 | name:'defaultname…'6 |}；
node--version->v6.3。1@Jail，为什么要使用React.PureComponent？抱歉@Jail其他问题…我如何验证props.name是否为空字符串？因为其他组件正在发送和空字符串，但在这种情况下，我希望在默认值下设置此值，例如，如果this.props.name===“”？“”this.props.name:'Default值'@JosephFlowers您能提供有关错误的详细信息吗？信息是什么？您能复制/粘贴代码吗？@JosephFlowers极好的问题：PureComponent告诉React您正在编写纯组件，这意味着无状态组件：它呈现的内容只取决于它接收到的道具。知道了这一点，React可以实现一些性能e优化。
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
    }
    // ...
}