Question

我是新来的，我正在尝试建立带有参数的自定义componenet。

我只是想知道这样做的确切方法。

这是我当前的代码，我应该如何将那些Columns，ajax和datasource传递到componenet。还是我做错了？

import * as React from 'react';
interface Column {
    name: string,
    header: string,
    value: Function
}
export default class DataTable extends React.PureComponent<({
    dataSource: any[],
    ajax: string
    columns: Column[]
    onEdit: Function,
    onDelete: Function
})>{

    public state = {
        dataSource: [],
        ajax: undefined,
        columns: [],
        onEdit: undefined,
        onDelete: undefined
    }

    componentDidMount() {
        if (this.state.ajax != undefined) {
            fetch(this.state.ajax)
                .then(response => response.json())
                .then(data => this.setState({ dataSource: data }));
        }
    }

    render() {

        var template = (
            <table className="table">
                <thead className="thead-darked">
                    {
                        this.state.columns.map((x: Column) => {
                            <th scope="col">{x.header}</th>
                        })
                    }
                </thead>

            </table>)
        return template;
    }
}

Answer 1

您不需要ajax，columns，onEdit和onDelete状态。只需使用道具即可。
用this.state.dataSource初始化this.props.dataSource。

以上两项更改将解决您的问题。此外，

如果ajax属性更改，则可能要再次获取数据。您必须为该行为实现componentDidUpdate方法。但是，我建议制作一个功能组件并使用useEffect钩子。
如果dataSource属性发生变化，您的dataSource状态将不会更新。尽管您可以添加更多代码以避免错误，但它可能导致错误行为。如果将“ ajax”部分移到组件之外，而仅使用dataSource prop，则逻辑将更加清晰，并且不易出现错误。

下面是更新的代码。

interface Props {
    dataSource: any[],
    ajax: string,
    columns: Column[],
    onEdit: Function,
    onDelete: Function
}

export default class DataTable extends React.PureComponent<Props>{
  public state = {
    dataSource: this.props.dataSource,
  }

  componentDidMount() {
    if (this.props.ajax != undefined) {
      fetch(this.props.ajax)
        .then(response => response.json())
        .then(data => this.setState({ dataSource: data }));
    }
  }

  render() {
    const template = (
      <table className="table">
        <thead className="thead-darked">
          {
            this.props.columns.map((x: Column) => {
              <th scope="col">{x.header}</th>
            })
          }
        </thead>
        {/* render something with this.state.dataSource */} 
      </table>
    );
    return template;
  }
}

反应自定义组件（DataTable）

1 个答案: