Javascript 带从视图中删除组件选项的条件显示警报组件

我正在用React建立一个表单。在这个表单中，我有一个警报组件，如果提交正常或错误，则显示一条响应消息

我的表单如下所示：

<form onSubmit={this.onSubmit}>
    {
        this.state.error &&
        <Alert text={this.state.error} />
    }
    <input
        type="text"
        placeholder="Enter link url"
        value={this.state.url}
        onChange={this.onUrlChange} />

    <button type="submit">Add link</button>
</form>

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

class Alert extends Component {
  state = {
    isVisible: true
  };
  handleToggleState = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  };
  render() {
    return this.state.isVisible ? (
      <div className="alert">
        {this.props.text}
        <button onClick={this.handleToggleState}>X</button>
      </div>
    ) : null;
  }
}

class Form extends Component {
  state = { error: "Some weird error" };
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        {this.state.error && <Alert text={this.state.error} />}
        <input
          type="text"
          placeholder="Enter link url"
          value={this.state.url}
          onChange={this.onUrlChange}
        />

        <button type="submit">Add link</button>
      </form>
    );
  }
}

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

我的状态有一个错误属性，如果设置了该属性，它将显示警报组件。在我的警报组件中，我希望显示由我的表单设置的给定文本：

const Alert = ({ text, closeCallback }) => (
    <div className="alert">
        {text}
        <button onClick={(e) => closeCallback()}>X</button>
    </div>
);

在警报组件中，我希望能够从视图中删除该组件，并使其从父渲染中消失。但是怎么做呢

我知道我可以从父级发送回调函数，将错误状态设置为空字符串，然后发送到我的警报组件，如：

<Alert closeCallback={parentFunction()} text={this.state.error} />

但是每次我想在这个场景中使用我的警报组件时，我都必须在父组件中创建确切的回调函数以及我的条件this.state.error&&。我能避免这种情况吗

---

顺便说一句，我是React新手。

您可以将函数保留在内部，只需在render中返回null，它告诉React不渲染任何内容，如下所示：

<form onSubmit={this.onSubmit}>
    {
        this.state.error &&
        <Alert text={this.state.error} />
    }
    <input
        type="text"
        placeholder="Enter link url"
        value={this.state.url}
        onChange={this.onUrlChange} />

    <button type="submit">Add link</button>
</form>

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

class Alert extends Component {
  state = {
    isVisible: true
  };
  handleToggleState = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  };
  render() {
    return this.state.isVisible ? (
      <div className="alert">
        {this.props.text}
        <button onClick={this.handleToggleState}>X</button>
      </div>
    ) : null;
  }
}

class Form extends Component {
  state = { error: "Some weird error" };
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        {this.state.error && <Alert text={this.state.error} />}
        <input
          type="text"
          placeholder="Enter link url"
          value={this.state.url}
          onChange={this.onUrlChange}
        />

        <button type="submit">Add link</button>
      </form>
    );
  }
}

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

---

我只是摆弄了一下@Karens answer，根据组件WillReceiveProps的不同，得出了以下结论，因此我不必在表单视图中设置条件，将所有条件都保留在警报组件的内部：

class Alert extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: props.text
    };
  }

  componentWillReceiveProps(e) {
    this.setState(e);
  }

  onHide = () => {
    this.setState({ text: '' });
  };

  render() {
    return (
      this.state.text ? (
        <div style={{backgroundColor: 'Red'}}>
          {this.state.text}
          <button onClick={this.onHide}>X</button>
        </div>
      ) : null
    )
  }
}

class Form extends Component {
  constructor() {
    super();
    this.state = {
      error: ''
    };
  }

  onRender = () => {
    this.setState({ error: '123' });
  };

  onHideRender = () => {
    this.setState({ error: '' });
  };

  render() {
    return (
      <div>
        <button onClick={this.onRender}>Render Alert</button>
        <button onClick={this.onHideRender}>Hide Alert</button>
        <Alert text={this.state.error} />
      </div>
    );
  }
}

---

啊哈，是的，我喜欢。在提交表单以便组件重新进入视图时，我只需记住将错误状态设置为空。描述中提出的问题与此无关，这是一个单独的问题。你特别问过如何在不暴露回调的情况下删除组件，我认为从这个角度来看，问题已经得到了回答。啊，是的，因为我并不反对。这只是一个思想的评论。但我也要求在父组件中不要有this.state.error条件。我在下面的回答中提出了一些这方面的想法。这完全回答了我的问题。我会接受你的回答，因为它为我指明了方向——谢谢