Question

我是反应世界的新手，我会展示来自兄弟组件的组件。我有父组件：

import Toast from './components/Toast/Toast'
class App extends Component {
    constructor(){
        super();
        this.state = {
            showToast:false
        };
    }   
  render() {
    return (
       <div id="cont">
          <Toast showToast={this.state.showToast}/>
          <Header />
        </div>

    );
  }
}

在我的Toast组件中：

class Toast extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const showToast = this.props.showToast;

        let toast = null;
        if (showToast) {
          toast = <div className="visible">Toast Ok</div>;
        }else{
            toast = null;
        } 

        return (
          <div>
            {toast}
          </div>
        );
      }
}

export default Toast;

在我的Header组件中，我有：

class Header extends Component {
    render() {
       return (
         <button> // With click, show toastComponents so setState parent </button>
       )
    }

因此，如果我点击按钮，我会设置状态键showToast以显示我的组件。

Answer 1

您可以将功能向下传递到if (*valid) { printf("valid is true.\n"); } if (!(*valid)) { printf("valid is false.\n"); }组件，然后在单击按钮时调用它。

<Header>

然后您需要做的就是将此道具传递给let showToast = () => this.setState({ showToast: true }); // ... <Toast showToast={this.state.showToast}/> <Header onClick={showToast}>内的点击处理程序。

<Header>

显示兄弟组件reactJs

1 个答案: