Question

通过Hoc函数传递道具，并将该道具存储为类状态名称，然后将其调回子组件。像这样：

export const withHoc = ({ Drawer, anchor }) => class WithHoc extends Component {
  state = {
    this.props.anchor: false
  }
  ...
  render() {
    return (
      <Drawer open={this.state.anchor} />
    )
  }
}

如果锚支柱是'left'，则state = { left: false }和<Drawer open=false />。

Answer 1

首先，将状态初始化为类变量意味着您无法引用HOC的实例。

但是，由于anchor是从传递给HOC的参数中解构而成的，因此可以对其进行引用并将其设置为计算属性。

export const withHoc = ({ anchor }) =>
  class WithHoc extends Component {
    state = {
      [anchor]: false
    }

    //...
    render() {
      return <Drawer open={this.state.anchor} />
    }
  }

如何通过hoc函数将props作为类状态名称传递给子组件

1 个答案: