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

在react中，您的组件可以在null方法

中返回render()

所以这是有效的

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

Answer 2

您可以将两个子组件放入一个父组件中（方法checkResultLength和this.state.downloadVisible = true）。

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

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

this.state.downloadVisible将作为过滤器表单组件中的prop传递，您可以隐藏并相应地显示它

Answer 3

首先，您应该知道如何在两个组件之间进行通信。如果这两个组件是父＆lt; - ＆gt;孩子，他们可以通过道具或功能回调进行交流。

您的组件不是父级＆lt; - ＆gt;子关系，所以最好的方法是使用flux数据流，您可以将过滤结果视为全局组件状态。

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

我使用Alt.js，这是我的演示版here，我希望它能为您提供帮助。

Answer 4

由于您将result道具传递给Result，因此您可以轻松地为您的DownloadBtn组件

添加一名警卫操作员

＆＃13;

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>
    )
  }
}

＆＃13;

ReactJS有两个不同的组件

4 个答案: