Question

我正在尝试显示项目列表。我的父组件定义了要使用的renderItem组件。

我是否可以将其他道具传递给该组件？

<Route exact path="/users/:uid/clients" component={Clients} />

const ParentComponent = ({ match }) => {
  return (
    <Component
      renderItem={SimpleCard}
    />
  );
};


// Component

  ...

  renderList = list => {
    const RenderItem = this.props.renderItem;
    return list.map(item => {
      return <RenderItem item={item} />;
    });
  }; // BUSTED

渲染的RenderItem（aka SimpleCard）组件永远不会收到“ item”道具，它是未定义的。

// SimpleCard
export default function SimpleCard({ item, onClick}) {
  const classes = useStyles();
  return (
    <Card className={classes.card} onClick={() => onClick(item)}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {item && item.name}
          </Typography>
          {item && item.description && (
            <Typography variant="body2" color="textSecondary" component="p">
              {item && item.description}
            </Typography>
          )}
        </CardContent>
      </CardActionArea>

      <CardActions>
        <Button size="small" color="primary" onClick={() => onClick(item)}>
          Details
        </Button>
      </CardActions>
    </Card>
  );
}

Answer 1

是的，我相信可以用与react-router进行渲染的方式相同，在这种情况下，渲染组件以传递像这样的道具

<Route path="/somepath/" component={MyComponent} />
<Route path="/someotherpath/" render={() => <MyOtherComponent props={"coolprop"}

您应该能够执行类似的语法

  <Component
      renderItem={<SimpleCard props={...props}/>}
    />

如果此语法不起作用，则必须添加

  <Component
   {...props}
      renderItem={SimpleCard}
    />

将道具传递到子组件

Answer 2

是的，如果一个道具使用的数量超过{... props}

，则可以根据需要在组件的道具中传递

void changesOnField() {
  print("c: changesOnField");
  String text = textController.text;
  if (text.isNotEmpty) { // set this
    callApi(text);
  }
}

将道具添加到作为道具传递的组件中

2 个答案: