React 中的组件是否应该知道从 Store 获取的数据对象的结构

Question

嗨，我是 React 和 Flux 的新手，它们工作得很好，真的让我的工作变得轻松，但现在这个问题困扰了我很长一段时间，比如说我有一个文件名列表，可以在其中变成灰色不可用状态。

我通过读取子组件中的 'available' 属性完成了此操作：

{fileA : { available : true }, fileB : { available : false } } //data get from the Store

但我对此感到非常不舒服，因为它使我的组件采用 return 中的数据类型（即应该有一个值，该值是一个对象类型，应该有一个 'available' 字段）

是否有任何其他方法可以以更解耦的方式实现此目标，或者我只是在不必要地担心？

Answer 1

在我看来，如果您正确处理数据缺失，期待某种类型和属性不是大问题。至于解耦，可以创建一个显示单个文件名的组件，等待两个props：fileName和avalable，让父组件将这些props传递给子组件，例如：

var FileList = React.createClass({
    render: function(){
    return (
        this.state.files.map(function(file){
                return <FileListItem fileName={file.name} available={file.available}/>
            }, this);
        );
    }
});

在这种情况下，子组件不会知道有关您的对象的任何详细信息。

Answer 2

我们总是使用 PropTypes 来表示我们的期望并避免错误。 PropTypes 也很酷，因为您不需要在一段时间后重新访问代码后检查整个数据树。

React PropTypes

React 中的组件是否应该知道从 Store 获取的数据对象的结构

Should component in React be aware of the structure of the data object get from the Store

flux

reactjs