典型方式

Question

你好我是reactjs的新手，我想学习如何隐藏按钮点击并显示div。这是我要隐藏的视图部分

<div className="comment_usr_details">
    <div>
        <img className="comment_usr_pic" src={profilePicture} alt=""/>
    </div>
    <div className="b">
        <p className="c">John Smith</p>
        <p className="d">1 minutes ago</p>
    </div>
    <img className="e" src={downarrow} alt=""/>
</div>

Answer 1

典型方式

最常见的模式是根据状态选择性地渲染元素。

class Foo extends React.Component {

    state = { showing: true };

    render() {
        const { showing } = this.state;
        return (
            <div>
                <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                { showing 
                    ? <div>This is visible</div>
                    : null
                }
            </div>  
        )
    }
}

替代

您还可以使用基于州的样式。这不太常见，但是当你在div中有复杂的组件时可能很有用 - 最近的一个例子，我在一个可切换的组件中有一个复杂的非React D3图，最初，我使用了上面的第一个方法，因为D3再次循环，所以在点击div打开/关闭时有点滞后。

通常使用第一种方法，除非您有理由使用替代方法。

class Foo extends React.Component {

    state = { showing: true };

    render() {
        const { showing } = this.state;
        return (
            <div>
                <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                <div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div>
            </div>  
        )
    }
}

注意

我使用?:三元运算符代替&& - 我坚信&&的使用依赖于该运算符的副作用来实现某个结果。它有效，不要误会我的意思，但在我看来，三元运算符更具表现力，并且设计为有条件的。

这最后一点只是我的观点 - 所以我不会质疑&&的用法。

Answer 2

在React中，您只是不渲染HTML的那一部分。所以把它作为条件的一部分：

{ this.props.display &&
  <div className="comment_usr_details">
    ...
  </div>
}

因此，如果this.props.display为true，则显示div，如果为false，则不显示。

Answer 3

tv2.setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    tv2.performLongClick();
                }
            });

如何隐藏和显示反应中的div

3 个答案:

典型方式

替代

注意