Question

所以，在新的ES6 React方式中，看到这样的事情很常见：

render()

  const { thing1, thing2, thing3 } = this.props

  ...other stuff

是否有可比较的状态属性方法，可能存在也可能不存在？

必须使用这样的状态变量非常烦人：

<h1>{this.state && this.state.title ? this.state.title : ''}</h1>

Answer 1

这实际上称为解构分配，这是一个es6功能，你可以在这里阅读： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

您可以轻松地对任何对象执行操作：

const { title } = this.state

Answer 2

如果在构造期间给它一个值，this.state总是非空的。您通常可以使用简单的||：this.state.title || ""简化标题测试。

以下是一个完整的例子：

class Foo extends React.Component {
    static propTypes = {
        thing1: PropTypes.string,
        thing2: PropTypes.string.isRequired,
    };

    // initialize state during construction
    state = { title: undefined, a: 1, b: 2 };

    render() {
        const { thing1, thing2 } = this.props;
        const { title, a, b } = this.state;

        return (
            <div>
                 {thing1 && <div>{thing1}</div>}
                 <div>{thing2}</div> {/* isRequired so will never be null */}
                 <div>{title || ""}</div>
                 {a && <div>{a}</div>} {/* only render if a is truthy */}
                 <div>{b || "no b"}</div> {/* render "no b" if b not set */}
            </div>
        );
    }
}

React - 是否有类似的声明状态属性的方法？

2 个答案: