Question

这是我的两个组成部分。 组件1：

var Main = React.createClass({
    getInitialState: function(){
    return{
    data: [],
    values:[],
    childRecord:[]
    };
    },
    componentDidMount: function(){
    $.ajax({
    url: "data.json",
    dataType: 'json',
    success: function(data) {
    this.setState({data: data});
    }.bind(this),
    error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
    }.bind(this)
    });
    render: function() {
    var that = this,
    data = this.state.data;
    if(this.state.data.length > 0) {
        data = this.state.data[0].values;
        data = this.state.data[0].values[0].children;
    }
    var data = this.state.data;
    if(this.state.data.length > 0) {
        data = this.state.data[0].values;
    }
    var nestedData = data.map(function(Record, id) {
     return(
            <Tile key={id} data={Record} child={data}/>
         );
    });
    return (
        <div className="row main-container">
         {nestedData}
        </div>
       );
     }
    });

    *Component 2:*

    var Tile=React.createClass({
    render:function(){
    return(
    <div className="row">
    <div className="tileForm">
    <h3>{this.props.data}</h3>
    </div>
    </div>
    );
    }
   });

我想在Tile Component中渲染json的某些部分。其他组件具有父子关系，因此我可以轻松地呈现数据，但我不知道如何在Tile组件中呈现数据，因为没有关系b / w Tile 组件和其他组件。我使用路由来调用 Tile 组件并使用DefaultHandler渲染 Main 组件，这不是完整的代码。任何形式的帮助将不胜感激。谢谢 FHM

Answer 1

您希望在此用例中使用Flux（或类似的）模式：https://github.com/facebook/flux - 它旨在解决此问题。

您可以将数据（JSON有效内容）封装在共享存储中。然后，您的组件都可以从这个商店中读取，而不管它们彼此之间的关系如何。

如果数据需要更改，您可以将此商店与您的组件可以调用以触发数据刷新/变异等的操作创建者配对。

当您对组件进行深度嵌套时，这也很有用，因为您可以避免深度压缩数据。

将数据从一个组件传递到另一个组件而没有父子关系

1 个答案: