Question

我正在尝试制作组合道具和状态的组件，以便实际视图只需要担心从道具中获取数据。在下面的代码中，我试图使用扩展运算符（可能不正确）

class CombinePropsWithStateComponent extends React.Component {
    ...snip...
    render() {
        return(<View {...props, this.state}/>);
    }
}

Answer 1

我认为您不能使用spread运算符来组合<View />内的对象。虽然它有点像ES2015传播操作符，但它很难连接到React和JSX，并且只允许... foo这是一个被转移为道具的对象。如果它是一个“真正的”扩展运算符，正确的语法将是{{... this.props，... this.state}}，带有双花括号。

您可以尝试先组合道具和状态，然后传递新对象：

render() {
    const newProps = {...this.props, ...this.state}
    return(<View {...newProps} />)
}

遵循此逻辑<View {...{...this.props, ...this.state}}也应该有效，但我目前无法对此进行测试。

Answer 2

你应该能够在将道具和状态作为道具传递之前将它们结合起来：

    const newProps = Object.assign({}, this.props, this.state)
    return(<View {...newProps} />) // Or, as a named single prop

值得注意的是AFAIK对象传播运算符是ES7并且需要使用一些Babel标志。

如何合并状态和道具，然后将它们作为道具传递？

2 个答案: