React学习手册

170

｜

第

7

章

const HiddenMessage = Expandable(ShowHideMessage)

这里我们创建了一个

HiddenMessage

组件，当

collapsed

属性值为

true

时，将会使用

“

x

”替换字符串中的每个字母或数字。当

collapsed

的属性值为

false

时，将会显

示这些消息。读者可以尝试在本章前面章节介绍的

HiddenMessages

组件中使用这个

HiddenMessage

组件。

接下来将使用相同的

HOC

创建一个按钮，用于显示和隐藏某个

div

中的内容。在接下

来的示例中，

MenuButton

可以用于创建

PopUpButton

，它是一个可以控制内容显示和

隐藏的组件：

class MenuButton extends Component {

componentWillReceiveProps(nextProps) {

const collapsed =

(nextProps.collapsed && nextProps.collapsed === true) ?

true :

false

this.setState({collapsed})

}

render() {

const {children, collapsed, txt, expandCollapse} = this.props

return (

<div className="pop-button"> ...