如何在渲染方法之外使用未声明的react?

IT技术 reactjs unstated
2021-05-12 07:19:32

我在我的项目中使用了 usated 库。

在渲染方法中,我是这样使用的set

render() {
    return (
            <ApiSubscribe>
                {api => (
                    <button content='CLICK ME' onClick={() => api.setMessage('RENDER CLICK')} />
                )}
            </ApiSubscribe>
    )
}

如何调用api.setMessage渲染的外部?例如在componentDidMount

Api订阅是:

export const ApiSubscribe = props => {
    // We also leave the subscribe "to" flexible, so you can have full
    // control over your subscripton from outside of the module
    return <Subscribe to={props.to || [Api]}>{props.children}</Subscribe>;
};
2个回答

像这样?

class Child extends Component {
  componentDidMount() {
    this.props.api.setMessage('hey')
  }
  render {...}
]

let Parent = () => (
  <ApiSubscribe>
    {api => <Child api={api} />}
  </ApiSubscribe>
)

您可以创建一个 HOC 来包装您的组件,然后将容器从 HOC 组件以 props 的形式传递给子组件。