將JSON對象從子組件傳遞到父組件

Question

在一個快速總結中，我實現的是一個photoupload系統。我有一個顯示上傳圖片預覽的div。這個div位於父組件中，我們將調用parent.jsx。在我們稱之爲child.jsx的子組件中，我實現了一個上傳系統。

裏面child.jsx我有以下代碼：

const FileUpload = React.createClass({ 
render: function() { 
    return(
     <div> 
     //dropzone is essentially a file input element 
     <Dropzone multiple={false} onDrop={this._onDrop}> 
     </Dropzone> 
     </div> 
    ); 
    }, 
    _onDrop: function(files) { 
    this.setState({ 
     photo: files 
    }); 
    }, 

我想了photo對象傳遞到我的父文件，並在下面的div使用該條件顯示它：

<div> 
    {this.state.coverPhoto.map(function(file) {return <img key={1} src={file.preview} />;})} 
</div> 

我正在考慮創建一個函數，該函數在子組件中調用時返回照片對象。也許是這樣的子組件中：

returnFiles: function() { 
    return Photo 
    } 

然後在父組件可致電我FileUpload.returnFiles並設置我的狀態有什麼返回。有任何想法嗎？

Answer 1

儘管我認爲調用子組件的函數具有直覺意義，但這打破了爲什麼React是如此優秀的工具的基本原因之一。

通過限制從父到子的數據流，React大大降低了應用程序的複雜性。

但是，就像JavaScript中的其他任何數據一樣，您可以將函數傳遞給子代。這樣，他們只在孩子的範圍內被調用，但是在需要他們的地方處理。

const Parent = React.createClass({ 
    render: function() { 
    return(
     <Child onDrop={this.handleOnDrop} 
    ); 
    }, 
    handleOnDrop: function(files) { 
    this.setState({ 
     photo: files 
    }); 
    } 
} 

const Child = React.createClass({ 
    render: function() { 
    <Dropzone multiple={false} onDrop={this.props.onDrop} /> 
    } 
})