Question

您好，我想知道如何扩展页面并向页面添加额外的道具很困难。下面的代码片段可以正常工作，并且可以填充基本文本。

import React from 'react';
import { Text } from '@whatever-library';

const SomeComponent = (props) => (
  <div>
    <Text field={props.fields.heading} />
  </div>
);

所以现在我想从外部API添加数据以在同一组件中进行渲染。下面是另一个正在运行的.js文件的片段，该文件正在工作并显示api提取中的内容，我该如何结合这两者

    class apiFetch extends SomeComponent {
      constructor(props) {
        super(props);
        this.state = {
          data: [],
          isLoaded: false,
        }
      }

      componentDidMount() {
        fetch('')
        .then(res => res.json())
        .then(json => {
          console.log(json);
          this.setState({isLoaded: true, data: json.data});
        });

      }

        render() {
        var { isLoaded, data} = this.state;
        if (!isLoaded) {
          return <div>Loading...</div>;
        }

        else{
          return (
            <div className="apiFetch">
 <ul>
                {data.map(data => (
                  <li key="{data.id}">Text:{data.text.more}</li> 
                ))}
              </ul>
            </div>
          );
        }
      }

任何帮助或指导都会很好。

Answer 1

您是否有选择扩展组件的特定原因？对于状态程序，extends语法适用于JavaScript类，但是您要尝试扩展函数。

如果您的目标是呈现从API接收的数据，则有几种方法可以实现。

您可以在父容器组件中发出请求，并将数据作为道具传递给子代。
您可以使用高阶组件（HOC）将其他道具传递到该组件。 HOC是一个接受组件作为参数并返回新组件的函数。您可以在此处阅读有关HOC的更多信息：https://reactjs.org/docs/higher-order-components.html

reactjs-将不同的道具传递给同一组件

1 个答案: