ReactJS两个不同的组件

Question

我对ReactJS组件有疑问。 因为我是ReactJS的新手，请多多包涵。 我一直在弄清楚如何使用ReactJS做到这一点。 这是场景。

场景：

<div>
    <button id="download-button">Download as CSV</button> <!-- This is a ReactJS Component -->
    <h3>Filters</h3>
    <form>
        <!--
            SOME FILTER FIELDS
        -->
        <input type="submit" value="Filter" />
    </form>
</div>

<div>
    <h2>Filtered Search Result</h3>
    <div id="result" filters="<?php echo $filters ?>"></div> <!-- This is a ReactJS Component -->
</div>

问题：

在结果组件内部，如果结果为空，我想隐藏下载按钮。 我知道，如果下载按钮位于结果组件内部，则这很简单。 但是在这种情况下，我只是不想编写所有与结果组件无关的html元素，只是为了能够访问这些html元素顶部的结果按钮。

Answer 1

在反应中，您的组件可以在render()方法中返回null

所以这是有效的

// @flow
import React from "react";
Props = {
    renderNull: boolean
}
const MyNullDecoratorComponent = (props: Props) => props.renderNull && null || "some text";

Answer 2

您可以将两个Child组件都放入一个Parent组件中（具有checkResultLength方法和this.state.downloadVisible = true）。

将这两个作为道具传递给结果Component。

在“ componentDidMount”中检入结果组件，并调用从父组件传递的函数checkResultLength，该函数将设置state.downloadVisible = false（如果您的results.length === 0）。

this.state.downloadVisible将作为prop传递到您的Filter Form组件中，您可以相应地隐藏和显示它

Answer 3

首先，您应该知道如何在两个组件之间进行通信。 如果这两个组件是父<->子代，则它们可以通过Props或函数回调进行通信。

您的组件不是父<->子关系，所以最好的方法是使用流量数据流。您可以将过滤器结果视为全局组件状态。

我认为您应该学习Flux数据流，例如Redux，Alt.js等，它可以解决您的问题。

我用Alt.js，这里是我的演示在这里 ，我希望它会帮助你。

Answer 4

既然你是路过的result道具的Result ，你可以很容易地只保护操作者添加到您的DownloadBtn组件

 class Result extends Component { render () { const { result } = this.props // is the same with const result = this.props.result return ( <div> {result.length >= 0 && <DownloadBtn /> } { // render results here } </div> ) } }