使用 React 隐藏组件

Posted 2023-02-23

【中文标题】使用 React 隐藏组件

【英文标题】：Hiding a component with React

【发布时间】：2017-03-24 10:27:00

【问题描述】：

我的代码中有几个反应类。 当应用启动时，用户会看到：

<div>
    <h1 className="headings" id="heading"> Football </h1>
      <input type="text" placeholder="name" />
      <input type="email" placeholder="use noths email" />
      <input type="submit" onClick=() => this.handleClick()/>
       this.state.results ? <Decision /> : null 
        <Thanks />
 </div>

结果的状态有效，因为当我单击上面的按钮时，它会将状态从 false 变为 true。 然后返回输入字段下方。但我宁愿它取代上面的输入字段。如何实现？

总之，一旦用户输入用户名和电子邮件并点击提交，我希望代码呈现在输入字段的页面而不是下方

【参考方案1】：

在render() 方法中将输出声明为变量：

let output;

^{注意：如果您不支持 ES6，请使用 var。}

然后使用条件语句填充变量：

if (this.state.results) 
  output = <Decision />;

else 
  output = (
    <div>
      <input type="text" placeholder="name" />
      <input type="email" placeholder="use noths email" />
      <input type="submit" onClick=() => this.handleClick()/>
    </div>
  )

现在只需在render() 方法的return 语句中返回output：

return (
  <div>
    <h1 className="headings" id="heading"> Football </h1>
    output
    <Thanks />
  </div>
)

【讨论】：

太好了，正是我需要的！

不过，我还有一个快速的问题。说在我渲染第二个输出之后，如果我想在那之后再渲染另一个东西怎么办？即状态发生了变化，它呈现了一个新页面，但是如果我想在那个状态下做其他事情并重新呈现其他东西怎么办？添加一个 else if 不起作用，因为 ifs 的工作方式（即一旦发现某事是真的，它就会跳出来）

【参考方案2】：

听起来你想把输入元素变成单独的<Form>组件并渲染

<div>
    <h1 className="headings" id="heading"> Football </h1>
     this.state.results ? <Decision /> : <Form handleClick= this.handleClick /> 
    <Thanks />
</div>

形式类似于

const Form = props => (
    <div>
        <input type="text" placeholder="name" />
        <input type="email" placeholder="use noths email" />
        <input type="submit" onClick=this.props.handleClick/>
    <div>
);