ReactJS两个不同的组件

Question

I have a question regarding ReactJS components. Please bear with me as I'm just new in ReactJS. I'm stuck figuring out how to do this with ReactJS. Here's the scenario.

SCENARIO:

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

PROBLEM:

Inside result component, if there's an empty result, I want to hide the download button. I understand that this is simple if download button is inside result component. But in this case, I just don't want to write all the html elements that is irrelevant inside the result component just to be able to access result button on top of those html elements.

Answer 1

In react your components can return null in render() method

So this is valid

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

Answer 2

You can put both the Child components into one Parent component(having method checkResultLength and this.state.downloadVisible = true ).

Pass these two as props in result Component.

Check in your result component in "componentDidMount" and call the function checkResultLength passed from the parent component which will set the state.downloadVisible = false if your results.length === 0.

this.state.downloadVisible will be passed as a prop in your Filter Form component and you can hide and show it accordingly

Answer 3

First of all, you should know how to communicate between two component. If this two component is parent <-> child, they can communicate by Props or function callback.

Your components are not parent <-> child relationship, so the best way is using flux data flow, You can treat your filter result as global component state.

I think you should learn Flux data flow, such as Redux, Alt.js, etc, it can resolve your problem.

I use Alt.js, Here is my demo here , I hope it will help you.

Answer 4

Since you are passing the result props to the Result you can just easily add a guard operator to your DownloadBtn Component

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