Question

我正在尝试在这里试验。我想构建一个组件，在安装后自动填充ajax请求中的一些数据。像这样：

var AjaxComponent = React.createClass({

    getInitialState: function() {
        return {
            data: {}
        };
    },

    render: function() {
        return (
            <div>
                {this.state.data.text}
            </div>
        );
    },

    componentDidMount: function() {
        makeAjaxResquest(this.props.url).then(function(response){
            this.setState({
                data: response.body // or something
            });
        }.bind(this));
    }

});

使用该示例组件，我将使用<AjaxComponent url="/url/to/fetch" />来显示内容。

现在，如果我想从子元素访问不同的数据位怎么办？我可以这样做吗？

<AjaxComponent url="/url/to/fetch">
    <div>
        <header>{RESPONSE.title}</header>
        <div>
            {RESPONSE.text}
        </div>
    </div>
</AjaxComponent>

如果在ajax请求结束之前没有呈现任何内容，那没问题。问题是我怎样才能传递儿童渲染的数据，不是道具。有可能吗？

Answer 1

我有一个类似的场景，我有类似的组件，可以查询来自不同API的数据。假设您知道给定API的预期响应，您可以采用相同的方式。

基本上创建一个通用组件，它将函数作为＆＃34; API＆＃34;然后定义不同类型的子组件及其相关的渲染函数。

例如：

在小部件中，您可以执行类似这样的操作，其中小部件只是一个包含大量功能的简单javascript文件：

componentDidMount: widgets[type].componentDidMount(),

render: widgets[type].render().

在小部件中，它会是这样的：

var widgets = {
 widget1: {
    componentDidMount: function () {
              //Ajax call..
     },

     render: function() {
     //How should I draw?

     }

},

 widget2: //Same format, different functions

然后在一些父组件中，你只需要去＆LT;小部件类型=＆＃34; widget1＆＃34; \＆GT;

或其他什么。

有一些奇怪的事情可能与React没有合适。首先，你应该把状态一直带到顶层组件，所以我不会在componentDidMount中进行我的ajax调用...我更有可能得到我想要的小部件数据我想要在更高级别渲染，然后将其作为道具传递，如果它不会发生变化，直到我再次进行API调用（在此处思考Flux样式流）。然后，只需将数据作为prop传递，然后指定渲染函数：

< Widget data={this.state.data[0]} type=widget1 />

＆＃34;陷阱＆＃34;这里是你假设这个数据道具中的任何东西都匹配你在窗口小部件类型中需要的东西。我会传入一个对象，然后在渲染函数等中验证它。

这是一种方式。不确定它是否有效，我确定知道更多的人可以分开但它适合我的用例我现在有一个类似组件的库，我可以通过传入数据和输入类型，然后查找相应的渲染函数并检查以确保数据对象包含我需要渲染的所有内容。

儿童动态内容与reactjs

1 个答案: