Question

我是React的新手，正在尝试使用React创建SPFX Webpart。我基本上是在尝试从sp列表中获取数据，并使用3个组件Products，ProductTable，ProductRow通过将数据作为道具向下传递来显示数据。

export interface IProductRow{
    ProductName:string;
    ProductPrice:number;
    }

   export interface IApplicationState{
    products:IProductRow[];
  }


export default class Products extends React.Component<IProductsProps, IApplicationState> {

  public constructor(props: IProductsProps, state: IApplicationState){    
    super(props);   

    this.state = {    
      products: []    
    };    
  }

    public componentDidMount() {  

        sp.web.lists.getByTitle('Products').items.get().then((items:IProductRow[])=>{
        this.setState({products:items});

        });

      }
  public render(): React.ReactElement<IProductsProps> {

    return (

    <ProductTable products={this.state.products}/>//throws error here
    );
  }
}


class ProductTable extends React.Component<IProductRow,{}>{
 public render():React.ReactElement<IProductRow>
 {
  return (<table>
     <tr><th>Product Name</th><th>Product Price</th></tr>
  </table>);
 }
}

class ProductRow extends React.Component{

  public render()
  {
   return (
       <div></div>
      );
  }

}

在上面的代码中，我试图将状态作为道具传递给组件，但出现错误：

类型'{产品：IProductRow []; }'无法分配给type 'IntrinsicAttributes＆IntrinsicClassAttributes＆只读和只读<{......。类型'{产品： IProductRow []; }”不可分配为“只读”类型。类型'{products：IProductRow [];属性'ProductName'丢失。 }'

请告知/纠正代码。还请告知我在做什么是否正确。

在React SPFX Webpart中将属性从父级传递到子组件

0 个答案: