在React中显示或隐藏元素

2020/09/24 05:41 · javascript ·  · 0评论

我第一次弄乱React.js,找不到通过click事件在页面上显示或隐藏内容的方法。我没有在页面上加载任何其他库,所以我在寻找使用React库的本机方法。到目前为止,这就是我所拥有的。当点击事件触发时,我想显示结果div。

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

反应约2020年

onClick回调中,调用状态挂钩的 setter函数以更新状态并重新渲染:

const Search = () => {
  const [showResults, setShowResults] = React.useState(false)
  const onClick = () => setShowResults(true)
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  )
}

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

ReactDOM.render(<Search />, document.querySelector("#container"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

反应约2014年

关键是使用来更新点击处理程序中组件的状态setState应用状态更改后,将render使用新状态再次调用方法:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

<style type="text/css">
    .hidden { display:none; }
</style>
render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

Here is an alternative syntax for the ternary operator:

{ this.state.showMyComponent ? <MyComponent /> : null }

is equivalent to:

{ this.state.showMyComponent && <MyComponent /> }

Lean why


Also alternative syntax with display: 'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

However, if you overuse display: 'none', this leads to DOM pollution and ultimately slows down your application.

这是我的方法。

import React, { useState } from 'react';

function ToggleBox({ title, children }) {
  const [isOpened, setIsOpened] = useState(false);

  function toggle() {
    setIsOpened(wasOpened => !wasOpened);
  }

  return (
    <div className="box">
      <div className="boxTitle" onClick={toggle}>
        {title}
      </div>
      {isOpened && (
        <div className="boxContent">
          {children}
        </div>
      )}
    </div>
  );
}

在上面的代码中,要实现此目的,我使用的代码如下:

{opened && <SomeElement />}

SomeElement仅当opened为true时才会渲染它之所以有效,是因为JavaScript如何解析逻辑条件:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise (and false will be ignored by react during rendering)
// be careful with 'falsy' values eg
const someValue = 0;
someValue && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
!!someValue && <SomeElement /> // will render nothing as we cast the value to boolean

使用这种方法而不是CSS的原因'display:none';

  • 虽然用CSS隐藏元素可能会“便宜”-在这种情况下,“隐藏”元素在反应世界中仍然是“活跃的”(这实际上会使它变得更加昂贵)

    • 这意味着,如果父元素(例如<TabView>)的属性会更改-即使您只看到一个标签,所有5个标签也会重新呈现
    • 隐藏元素可能仍在运行某些生命周期方法-例如。它可能会在每次更新后从服务器获取一些数据,即使它不可见
    • 如果它将收到不正确的数据,则隐藏元素可能会使应用程序崩溃。当您在更新状态时可以“忘记”不可见的节点时,可能会发生这种情况
    • 您可能会在使元素可见时错误地设置错误的“显示”样式-例如。某些div默认为'display:flex',但是您会错误地设置'display:block',display: invisible ? 'block' : 'none'这可能会破坏布局
    • 使用someBoolean && <SomeNode />非常容易理解和推理,特别是如果您与显示某些东西相关的逻辑变得复杂时
    • 在许多情况下,您想在元素状态重新出现时对其进行“重置”。例如。您可能有一个想要在每次显示时将其设置为初始位置的滑块。(如果这是保持先前元素状态的理想行为,即使它处于隐藏状态,这在IMO中也很少见-如果以其他方式记住此状态会很复杂,我确实会考虑使用CSS)

使用最新版本的react 0.11,您也可以只返回null以不呈现任何内容。

渲染为空

我创建了一个为您处理的小组件:react-toggle-display

它将display: none !important基于hideshow道具将样式属性设置为

用法示例:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

已经有好几个好答案,但是我认为它们的解释不够好,给出的几种方法都包含一些可能使人们绊倒的陷阱。因此,我将介绍三种主要方法(外加一个脱题选项)并说明其优缺点。我主要是在写这篇文章,因为大量推荐了选项1,如果使用不当,则该选项存在很多潜在问题。

选项1:父级中的条件渲染。

我不喜欢这种方法,除非您只将组件渲染一次并将其保留在那里。问题是,每次切换可见性时,都会导致从头开始创建组件的反应。这是例子。LogoutButton或LoginButton有条件地在父LoginControl中呈现。如果运行此命令,您会发现每次单击按钮都会调用构造函数。https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

现在,React很快就可以从头开始创建组件。但是,它仍然必须在创​​建代码时调用您的代码。因此,如果您的构造函数,componentDidMount,渲染等代码很昂贵,那么它将大大减慢显示组件的速度。这也意味着您不能将其与有状态组件一起使用,在状态组件中,您希望状态在隐藏时得以保留(在显示时得以恢复)。一个优点是,直到选择了隐藏组件,它才被创建。因此,隐藏的组件不会延迟您的初始页面加载。在某些情况下,您可能希望在切换时希望重置有状态组件。在这种情况下,这是您的最佳选择。

选项2:在孩子中进行条件渲染

这将同时创建两个组件。如果组件被隐藏,则将其余渲染代码短路。您还可以使用可见道具以其他方法使其他逻辑短路。注意codepen页面中的console.log。https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

现在,如果初始化逻辑很快并且子级是无状态的,那么您将不会看到性能或功能上的差异。但是,为什么要让React在每次切换时都创建一个全新的组件?但是,如果初始化开销很大,那么每次切换组件时,选项1都会运行该选项,这会在切换时减慢页面速度。选项2将在第一页加载时运行组件的所有初始化。减慢第一个负载。应该再次注意。如果您只是根据条件一次显示该组件并且不进行切换,或者希望在切换时重置该组件,则选项1很好,可能是最好的选择。

但是,如果页面加载速度缓慢是一个问题,则意味着您在生命周期方法中拥有昂贵的代码,通常这不是一个好主意。您可以并且可能应该通过将昂贵的代码移出生命周期方法来解决页面加载缓慢的问题。将其移动到由ComponentDidMount启动的异步函数中,并使回调函数通过setState()将其置于状态变量中。如果状态变量为null且组件可见,则使render函数返回一个占位符。否则渲染数据。这样,页面将快速加载并在标签页加载时填充。您也可以将逻辑移至父级,并将结果作为道具推送给子级。这样,您可以确定首先加载哪些选项卡的优先级。或缓存结果,仅在首次显示组件时运行逻辑。

选项3:隐藏课程

类隐藏可能是最容易实现的。如前所述,您只需创建一个带有display:none的CSS类,然后根据prop分配该类。缺点是调用了每个隐藏组件的整个代码,并且所有隐藏组件都附加到DOM。(选项1根本不会创建隐藏的组件。选项2在隐藏组件时会短路不必要的代码,并将组件完全从DOM中删除。)根据注释者所做的一些测试,这似乎在切换可见性方面更快。其他答案,但我无法接受。

选项4:一个组成部分,但更改道具。也许根本没有任何组件可以缓存HTML。

这个不是对每个应用程序都有效,它不在主题之列,因为它与隐藏组件无关,但是对于某些用例,它可能是比隐藏更好的解决方案。假设您有标签。可能可以编写一个React组件,而仅使用道具来更改选项卡中显示的内容。您还可以将JSX保存为状态变量,并使用道具决定在render函数中返回哪个JSX。如果必须生成JSX,请执行该操作并将其缓存在父级中,然后将正确的JSX作为道具发送。或在子代中生成并以子代状态缓存它,并使用道具选择活动的子代。

您在状态(例如“ show”)中设置一个布尔值,然后执行以下操作:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

这是利用虚拟DOM的好方法

class Toggle extends React.Component {
  state = {
    show: true,
  }

  toggle = () => this.setState((currentState) => ({show: !currentState.show}));

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          toggle: {this.state.show ? 'show' : 'hide'}
        </button>    
        {this.state.show && <div>Hi there</div>}
      </div>
     );
  }
}

这里的例子

使用React挂钩:

const Toggle = () => {
  const [show, toggleShow] = React.useState(true);

  return (
    <div>
      <button
        onClick={() => toggleShow(!show)}
      >
        toggle: {show ? 'show' : 'hide'}
      </button>    
      {show && <div>Hi there</div>}
    </div>
  )
}

这里的例子

根据文档,最佳做法如下:

{this.state.showFooter && <Footer />}

仅在状态有效时才渲染元素。

class Toggle extends React.Component {
  state = {
    show: true,
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button onClick={()=> this.setState({show: !show })}>
          toggle: {show ? 'show' : 'hide'}
        </button>    
        {show && <div>Hi there</div>}
      </div>
     );
  }
}
   class FormPage extends React.Component{
      constructor(props){
           super(props);
           this.state = {
             hidediv: false
           }
      }

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

我从React团队的声明开始:

在React中,您可以创建不同的组件来封装所需的行为。然后,您只能根据应用程序的状态来渲染其中的一些。

React中的条件渲染的工作方式与JavaScript中的条件工作方式相同。使用if或conditional运算符之类的JavaScript运算符来创建表示当前状态的元素,并让React更新UI以匹配它们。

You basically need to show the component when the button gets clicked, you can do it two ways, using pure React or using CSS, using pure React way, you can do something like below code in your case, so in the first run, results are not showing as hideResults is true, but by clicking on the button, state gonna change and hideResults is false and the component get rendered again with the new value conditions, this is very common use of changing component view in React...

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

If you want to do further study in conditional rendering in React, have a look here.

使用React Hooks的简单隐藏/显示示例:(很抱歉,没有摆弄任何东西)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

如果您想了解如何切换组件的显示,请查看此小提琴。

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById('container'));

一种使用Hooks在React中显示/隐藏元素的简单方法

const [showText, setShowText] = useState(false);

现在,让我们向渲染方法添加一些逻辑:

{showText && <div>This text will show!</div>}

onClick={() => setShowText(!showText)}

做得好。

在某些情况下,高阶组件可能会有用:

创建更高阶的组件:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

扩展自己的组件:

export const MyComp= HidableComponent(MyCompBasic);

然后,您可以像这样使用它:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

这减少了一些样板并强制遵守命名约定,但是请注意,MyComp仍将被实例化-省略的方法已在前面提到:

{ !hidden && <MyComp ... /> }

使用rc-if-else模块

npm install --save rc-if-else
import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

使用ref和操作CSS

一种方法可能是使用React ref并使用浏览器的API操纵CSS类。如果这样做的唯一目的是避免在单击按钮时隐藏/显示某些DOM元素,则可以避免在React中重新渲染。

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            <button onClick={this.toggleChild}>Toggle Child</button>
            <div ref={this.childContainer}>
                <SomeChildComponent/>
            </div>

            ...
        );
    }
}


// styles.css
.hidden {
    display: none;
}

PS 如果我错了,请纠正我。:)

如果您使用引导程序4,则可以通过这种方式隐藏元素

className={this.state.hideElement ? "invisible" : "visible"}

也可以这样实现(非常简单的方法)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
   <button onClick={ this.toggle }> Toggle </button>
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }

本示例说明如何使用每1秒切换一次的切换按钮在组件之间切换

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>
    <img 
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
   </div>
)

const Component2 = () => {
  return (
    <div>
       <img 
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px- 
12ccse.jpg" />
  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (
      <Fragment>
        {toggleFlag ? <Component1 /> : <Component2 />}
       </Fragment>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用以下精简语法:

{ this.state.show && <MyCustomComponent /> }

这是一个简单,有效和最佳的解决方案,它带有用于显示/隐藏元素的无类React组件。使用React 16的最新create-react-app项目中提供React-Hooks的使用

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (
<React.Fragment>
    <h3>
        Hiding some stuffs 
    </h3>
    <button onClick={handleToggle}>Toggle View</button>
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
</React.Fragment>)

}  
export default RenderPara;

快乐编码:)

//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}

您可以使用css文件

    var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
                Some Results
            </div>
        );
    }
})

并在css文件中

    .search-results {
     ...
     display: none
     &.show {
      display: block
   }
}
var Search= React.createClass({
 getInitialState: () => { showResults: false },
 onClick: () => this.setState({ showResults: true }),
 render: function () {
   const { showResults } = this.state;
   return (
     <div className="date-range">
       <input type="submit" value="Search" onClick={this.handleClick} />
       {showResults && <Results />}
     </div>
   );
 }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);
class App extends React.Component {
  state = {
    show: true
  };

  showhide = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div className="App">
        {this.state.show && 
          <img src={logo} className="App-logo" alt="logo" />
        }
        <a onClick={this.showhide}>Show Hide</a>
      </div>
    );
  }
}
var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="checkbox" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                <input type="text" />
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>
本文地址:http://javascript.askforanswer.com/zaireactzhongxianshihuoyincangyuansu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!