Children 使用 reactjs 的动态内容

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" /> 来显示内容。

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

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

如果它在 ajax 请求结束之前不呈现任何内容，则没有问题。问题是我如何将 children 的数据传递给渲染， 而不是道具 。可能吗？

Answer 1

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

本质上是制作一个通用组件，在其中它支持各种 "API" 的功能，然后定义不同类型的子组件及其关联的渲染函数。

例如：

在 widget 中，你可以做这样的事情，其中 widgets 只是一个普通的 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

然后在一些父组件中你只需去 < 小部件类型="widget1" \>

或其他。

有一些奇怪的事情可能不适合 React。首先，您应该一直获取状态直到顶级组件，所以我不会在 componentDidMount 中进行 ajax 调用...我更有可能获得我想要的小部件数据想要在更高级别渲染，然后将其作为 prop 传递，如果它不会改变，直到我进行另一个 API 调用（这里考虑 Flux 样式流）。然后，将数据也作为 prop 传入并指定渲染函数：

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

这里的 "gotcha" 是您假设此数据道具中的任何内容都将匹配您在小部件类型中需要的内容。我会传入一个对象，然后在渲染函数等中验证它。

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

Children 使用 reactjs 的动态内容

Children dynamic content with reactjs

ajax

reactjs