Question

假设您有一个代码：

import pandas as pd
from os import chdir
from datetime import datetime    

# point to the folder where the data is
chdir(".\\Data")

emp = pd.read_excel("emp.xlsx")
dept = pd.read_excel("dept.xlsx")
locations = pd.read_excel("locations.xlsx")

# build a dictionary where keys are the file names and values are a list of columns names and number of rows
dictDFColNames = {
    "emp.xlsx": [list(emp.columns), emp.shape[0]],
    "dept.xlsx": [list(dept.columns), dept.shape[0]],
    "locations.xlsx": [list(locations.columns), locations.shape[0]]
}
dictDFColNames = {k:[[c.strip() for c in v[0]], v[1]] for k,v in dictDFColNames.items()}

# dictionary of the metadata
dictColNames = dict()

with open("metadata.txt") as f:
    next(f)
    for line in f:
        line = line.strip()
        key = line.split(":")[0]
        values = line.split(":")[-1].split(",")
        values = [c.strip() for c in values]
        dictColNames[key] = values

f = open("validation.csv", "w")
header = "File_name,count,systemdate,validationstatus\n"
f.write(header)
for k, v in dictDFColNames.items():
    s = ""
    col_names = [x.split(".")[0] for x in v[0]]
    s_failed = k + "," + str(v[1]) + "," + datetime.today().strftime('%Y-%m-%d') + ",failed\n"
    s_success = k + "," + str(v[1]) + "," + datetime.today().strftime('%Y-%m-%d') + ",success\n"
    if len(col_names) > len(set(col_names)):
        s = s_failed
    else:
        if set(dictDFColNames[k][0]) == set(dictColNames[k]):
            s = s_success
        else:
            s = s_failed
    f.write(s)
f.close()

您可以这样使用它：

const method = Component => {
  const someProps = { foo: 'bar' };
  // Add those props to the Component and render it
};

我应该在method(<MyComponent />)中输入什么内容，以便进一步通过method？

Answer 1

基于类的语法

bool

基于功能的语法

render() {
  return <Component {...this.props}>;
}

如果您想了解更多有关此主题的信息，那就是HOC，高阶组件

Answer 2

不幸的是，这段代码不会返回要渲染的组件：

const method = Component => {
  const someProps = { foo: 'bar' };
  // Add those props to the Component and render it
};

您希望您的HOC method像这样：

const method = Component => props => {
  const someProps = { foo: 'bar' }

  return <Component {...someProps} {...props} />
}

...someProps是通过HOC“注入”到Component中的额外道具。通常，这来自HOC method内部的一些API调用。

...props是调用时会传递到Component的“正常”道具。

为了说明我的意思：

import FooComponent from './FooComponent'

// Using the HOC:
const FooComponentWithMethod = method(FooComponent)

// ...rest of code
render() {
  return <FooComponent hello={'world'} />
}
// ...rest of code

当您在console.log(this.props中FooComponent时，您会看到两者

{
  foo: 'bar', // injected by 'method' HOC
  hello: 'world' // passed down from parent
}

Answer 3

似乎早上带来了答案：

要获得带有新道具的Component，并同时保留旧道具：

const method = (Component) => {
  const customProps = { foo: 'bar' };
  const elemProps = Component.props;
  const mergedProps = { ...customProps, ...elemProps };
  const cloned = React.cloneElement(Component, mergedProps);
};

React-将props转移到已经是React元素的变量中

3 个答案: