ReactJS 两个不同的组件答案

【问题标题】：ReactJS two different componentsReactJS 两个不同的组件
【发布时间】：2017-02-03 07:20:57
【问题描述】：

我有一个关于 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 元素之上的结果按钮。

【问题讨论】：

如何将组件的范围渲染到 DOM？您是否对 ReactDOM.render 使用了两个不同的调用？
是的，我使用两个不同的调用来渲染。下面是它的样子： src/components/download-button.js import * as React from "react" export class DownloadButton extends React.Component { render() { return ( <div> <button onClick={this.download.bind(this)}>Download</button> </div> ) } } src/components/search-result.js import * as React from "react" export class SearchResult extends React.Component { render() { return ( <div> {this.displayResult()} </div> ) } }

标签： javascript reactjs react-dom

【解决方案1】：

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

将这两个作为 props 传递到结果组件中。

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

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

【讨论】：

是的，我也想过。但在这种情况下，我不能将它们放在 1 个组件下，因为下载按钮被放置在另一个文件中，因为我在视图中使用了布局。

【解决方案2】：

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

所以这是有效的

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

【讨论】：

感谢您的回答，您能否更具体地说明如何使用您发布的代码？实际上，我正在考虑结果组件中的一个函数，说下载按钮组件将被隐藏。

【解决方案3】：

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

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

我觉得你应该学习 Flux 数据流，比如 Redux、Alt.js 等，它可以解决你的问题。

我用的是 Alt.js，这是我的演示 here，希望对你有帮助。

【讨论】：

【解决方案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>
    )
  }
}

【讨论】：