React Button单击隐藏并显示组件

Question

我有一个显示和隐藏文本的切换按钮。单击该按钮时，我希望它隐藏另一个组件，如果再次单击，它将显示它。

我在这里创建了一个副本：

https://repl.it/repls/DapperExtrasmallOpposites

我想保留原始的显示/隐藏文本，但是当单击按钮时，我也想隐藏其他组件。

如何传递该状态或如何创建if语句/三元运算符以测试其处于显示或隐藏状态。

在上面的副本中都说得通！

Answer 1

我刚刚看了你的REPL。

您需要在App组件中具有可见性状态，然后向下传递一个函数以将其更新为Toggle组件。

然后，很容易有条件地呈现NewComponent组件，如下所示：

render() {
  return (
    <div className="App">
    {this.state.visibility && <NewComponent />}
    <Toggle setVisibility={this.setVisibility.bind(this)} />
    </div>
  );
}

setVisibility功能是更新可见性状态的功能。

Answer 2

要完成此操作，您应该将状态提高一些。可以将状态变化从切换组件传播到父组件，然后以任何方式使用它，但这不是首选的方式。

如果将状态放在父组件中，则可以使用通过道具将其传递给所需的组件。

import React from "react";

class Toggle extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.toggleVisibility}>
          {this.props.isVisible ? "Hide details" : "Show details"}
        </button>
        {this.props.isVisible && (
          <div>
            <p>
              When the button is click I do want this component or text to be
              shown - so my question is how do I hide the component
            </p>
          </div>
        )}
      </div>
    );
  }
}

class NewComponent extends React.Component {
  render() {
      return (
          <div>
              <p>When the button below (which is in another component) is clicked, I want this component to be hidden - but how do I pass the state to say - this is clicked so hide</p>
          </div>
      )
  }
}

export default function App() {
  const [isVisible, setIsVisible] = React.useState(false);
  const toggleVisibility = () => setIsVisible(!isVisible);

  return (
    <div className="App">
      <Toggle isVisible={isVisible} toggleVisibility={toggleVisibility} />
      {isVisible && <NewComponent />}
    </div>
  );
}

Answer 3

如果您希望Toggle组件显示/隐藏另一个组件，则需要将该其他组件移到Toggle组件中或将切换状态移到父组件中。

作为一个简单的例子：

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Toggle/>
            </div>
        )
    }
}

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showFirstText: true,
        }
    }

    toggleText = () => {
        this.setState(prevState => ({
            ...prevState,
            showFirstText: !prevState.showFirstText,
        }));
    }

    render() {
        const { showFirstText } = this.state;

        return (
            <div className="App">
                <button onClick={ this.toggleText }>Toggle</button>

                { showFirstText ? (
                    <p>
                        This is the first text
                    </p>
                ) : (
                    <p>
                        And this is the second
                    </p>
                )}
            </div>
        )
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>