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

Posted 2023-02-22

【中文标题】如何在 react.js ES6 中使用道具设置状态

【英文标题】：How to set states with props in react.js ES6

【发布时间】：2017-01-21 20:43:36

【问题描述】：

我想知道，如何使用 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' ;
  

【参考方案1】：

实际上，你不需要一个有状态的组件来做你想做的事情（反模式：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 !
    

【讨论】：

您好@jail 我正在尝试实施您的解决方案，但出现错误：static defaultProps = > 4 | static defaultProps = | ^ 5 | name: 'Default name...' 6 | ; node -- version -> v6.3.1

@Jail，你为什么使用 React.PureComponent？

对不起@Jail 其他问题...如何验证 props.name 是否不是空字符串？导致其他组件正在发送和空字符串，但在这种情况下，我想将其设置为默认值，例如 if this.props.name === '' ？ '' this.props.name : '默认值'

@JosephFlowers 你能详细说明你的错误吗？消息是什么？你能复制/粘贴你的代码吗？

@JosephFlowers 很好的问题：PureComponent 告诉 React 你正在编写一个纯组件，这意味着一个无状态组件：它呈现的内容仅取决于它接收到的道具。知道这一点后，React 可以实现一些性能优化。

【参考方案2】：

你只需要在构造方法中传递 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
        ;
    

请注意，在某些情况下它不是反模式：

（对于更复杂的逻辑，只需将计算隔离在一个方法中。）

但是，如果您明确表示 prop 只是组件内部控制状态的种子数据： 来源：https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

顺便说一句，对于 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'));

【讨论】：

感谢您的快速回答，效果很好！！

请注意...如果 props.name 更改，它不会反映在您的状态中...这是反模式，除非您将道具名称更改为“initialName”，但它是情况下，您不需要硬编码另一个...更多信息：facebook.github.io/react/tips/…

@Jalil 感谢您的警告，因为设置“const”组件值可能是一个很好的解决方案

没听懂你……你在说什么？

你是对的，但如果你只需要一次使用道具设置状态（例如，ajax REST url 或不会改变的whataver），在构造函数中设置状态可能是一个很好的解决方案，不要你不觉得吗？

【参考方案3】：

您可以对无状态组件执行此操作

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

【参考方案4】：

在 es7 中你可以像这样初始化 state。

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
    
    // ...