组件children设为函数
const Width = ({ children }) => children(500)
// The component calls children as a function,with some number of arguments.
// Here,it’s the number 500.
// To use this component,we give it a function as children.
(<Width>
{width => <div>window is {width}</div>}
</Width>)
// We get this output.
<div>window is 500</div>
//With this setup,we can use this width to make rendering decisions.
(<Width>
{width =>
width > 600
? <div>min-width requirement met!</div>
: null
}
</Width>)
// If we plan to use this condition a lot,we can define another components
// to encapsulate the reused logic.
const MinWidth = ({ width: minWidth,children }) =>
(<Width>
{width =>
width > minWidth
? children
: null
}
</Width>);
// Obviously a static Width component isn’t useful but one that watches
// the browser window is. Here’s a sample implementation.
class WindowWidth extends React.Component {
constructor () {
super();
this.state = { width: 0 };
}
componentDidMount() {
this.setState(
{width: window.innerWidth},() => {
window.addEventListener(
"resize",({target}) => this.setState({width: target.innerWidth})
)
}
)
}
render() {
return this.props.children(this.state.width);
}
}
许多开发者使用HOC处理这类问题,这是偏好问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。