ReactJS兩個不同的組件

我有一個關於ReactJS組件的問題。請耐心等待，因爲我只是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元素的頂部的結果按鈕。

來源

2017-02-03 Jame Paul Almerino

組件DOM的你是如何呈現覆蓋面？你對ReactDOM.render使用了兩個不同的調用嗎？ – Pineda

是的，我使用兩個不同的調用來渲染。下面是它的樣子： src/components/download-button.js 'import * as React from「react」 export class DownloadButton extends React。組件{ 渲染（）{ 回報（

） } }' 的src /組件/搜索result.js '進口*爲響應「反應」出口類信息搜索結果擴展React.Component { 渲染（）{ 回報（

{this.displayResult()}

） } }' –

在react您的組件可以在render()方法返回null

因此，這是有效的

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

來源

2017-02-03 07:24:40 locropulenton

感謝您的回答，您可以在如何使用您發佈的代碼更具體的？實際上，我正在考慮結果組件中的一個函數，它說下載按鈕組件將被隱藏。 –

已更新的示例。 – locropulenton

你可以把倆孩子組件集成到一個父分量的（方法checkResultLength和this.state.downloadVisible = true）。

將這兩個作爲道具在結果組件中傳遞。

檢查在「componentDidMount」你的結果成分並調用該函數checkResultLength從中將設置state.downloadVisible = false如果您results.length === 0

this.state父組件傳遞。 downloadVisible將作爲您的濾鏡表單組件中的道具傳遞，您可以相應地隱藏並顯示它

來源

2017-02-03 08:35:14 sangamkumar91

是的，我也想到了。但在這種情況下，我不能將它們放在1個組件之下，因爲下載按鈕被放置在另一個文件中，因爲我正在使用佈局和視圖。 –

首先，您應該知道如何在兩個組件之間進行通信。如果這兩個組件是父項<-> child，它們可以通過Props或函數回調進行通信。

您的組件不是父項< - >子關係，所以最好的方法是使用flux數據流，您可以將過濾結果視爲全局組件狀態。

我想你應該學習Flux數據流，比如Redux，Alt.js等，它可以解決你的問題。

我使用Alt.js，這裏是我的演示here，我希望它能幫助你。

來源

2017-02-17 09:36:39

因爲您傳遞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> 
 
    ) 
 
    } 
 
}

來源

2017-02-17 10:27:25 mateeyow

ReactJS兩個不同的組件

回答

相關問題