如何隐藏组件是反应并显示另一个组件？

Posted 2021-04-16

你能告诉我如何在reactJS中隐藏组件并显示另一个组件吗？我有一个按钮和文本（hello）。按钮单击，我想隐藏按钮以及文本并显示另一个文本bye这里是我的代码https://codesandbox.io/s/50lj63xvk

showBankDetail = () => {
    console.log("====");
    this.setState({
      validForm: true
    });
  };
  render() {
    const validForm = !this.state.validForm;
    return { validForm } ? (
      <div>
        heloo<button onClick={this.showBankDetail}>hide</button>
      </div>
    ) : (
      <div>bye</div>
    );
  }

答案

一种方法是首先将它放在一个单独的变量上

showBankDetail = () => {
  console.log("====");
  this.setState({
    validForm: true
  });
};

render() {
  const validForm = !this.state.validForm;
  let form;
  if (validForm) {
    form = (<div>
            heloo<button onClick={this.showBankDetail}>hide</button>
          </div>);
  } else {
    form = (<div>bye</div>);
  }
  return ({form});
}

另一答案

{ validForm }正在创建一个具有属性validForm和validForm值的对象（例如true或false）。你可以阅读更多关于它here。您的代码应如下所示

showBankDetail = () => {
  console.log("====");
  this.setState({
    validForm: true
  });
};
render() {
  const validForm = !this.state.validForm;
  return validForm ? (
    <div>
      heloo<button onClick={this.showBankDetail}>hide</button>
    </div>
  ) : (
    <div>bye</div>
  );
}

另一答案

你应该看一些事情。首先，您要切换validForm状态，所以在showBankDetail函数中执行此操作。您可以根据validForm返回不同的元素，但也可以内联。看到：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      validForm: false
    };
  }
  showBankDetail = () => {
    this.setState({
      validForm: !this.state.validForm
    });
  };
  render() {
    return (
      <div>
        { this.state.validForm ?
          <div>heloo</div> :
          <div>bye</div>
        }
        <button onClick={this.showBankDetail}>hide</button>
      </div>
    )
  }
}