React 按钮点击隐藏和显示组件

Question

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

我在这里创建了一个repl：

https://repl.it/repls/DapperExtrasmallOpposites

我想保留原来的显示/隐藏文本，但我还想在单击按钮时隐藏一个附加组件。

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

上面的回复都说得通！

Answer 1

我刚看了你的REPL

你需要在你的App组件中有visibility状态，然后传递一个函数来更新它到Toggle组件。

然后有条件地渲染 NewComponent 组件就很容易了，像这样：

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

其中 setVisibility 函数是更新可见性状态的函数。

Answer 2

要做到这一点，你应该把状态提高一点。可以将状态更改从切换组件传播到父组件，然后以任何方式使用它，但这不是首选方式。

如果您将状态放在父组件中，您可以通过 props 将其传递给所需的组件。

import React from "react";

export default function App() {
  // Keep the state at this level and pass it down as needed.
  const [isVisible, setIsVisible] = React.useState(false);
  const toggleVisibility = () => setIsVisible(!isVisible);

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

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>
      )
  }
}

React 按钮点击隐藏和显示组件

React Button Click Hiding and Showing Components

state

reactjs

react-props