5

所以我有一个简单直接的问题。

所以我们可以将反应组件存储在一个变量中。但是现在，我想知道如果将道具存储在变量中，是否可以将道具传递给组件？

//////////////////////////////////////////////
//////  Normal & typical React component
//////////////////////////////////////////////

const myComponent = <Hello name={'Jamie'} /> 

render () {

  return myComponent;

}


////////////////////////////////////////
//////  What I want
////////////////////////////////////////

const myComponent = <HelloWorld /> 

// I want to be able to add that props here
// something like myComponent.addProps({'name': 'jamie'});

render () {

  return myComponent;

}

我的问题远不止于此。我想知道我们在 React API 中是否有这样的功能。

4

4 回答 4

11

您可以尝试如下，

React.cloneElement(
  myComponent,
  {prop1: "prop value"}
)

参考文档：React 官方文档

于 2019-01-20T04:48:21.593 回答
1

在 typeScript 中遇到了同样的问题，在 JSX 中有一个 menuItem 列表来映射它，每个都包含一个不同的 React Component 图标，如下所示：

const menuItems: {label: string, icon: React.FC, selected:boolean}[] = [
{label: 'Home', icon: <HomeIcon/>, selected: false}, 
{label: 'Live TV', icon: <ScreenIcon/>, selected: false}, 
{label: 'VOD', icon: <PlayIcon/>, selected: true},
{label: 'Podcasts', icon: <MicIcon/>, selected: false},
{label: 'Games', icon: <GameIcon/>, selected: false},
{label: 'App', icon: <MenuIcon/>, selected: false},
{label: 'Services', icon: <ShopIcon/>, selected: false},
{label: 'Languages', icon: <WorldIcon/>, selected: false},];

但是如果 menuItem 被选中或聚焦，我需要给图标一个“填充”道具，所以我改变了我的数组，如下所示：

const menuItems: {label: string, icon: React.FC, selected:boolean}[] = [
{label: 'Home', icon: HomeIcon, selected: false}, 
{label: 'Live TV', icon: ScreenIcon, selected: false}, 
{label: 'VOD', icon: PlayIcon, selected: true},
{label: 'Podcasts', icon: MicIcon, selected: false},
{label: 'Games', icon: GameIcon, selected: false},
{label: 'App', icon: MenuIcon, selected: false},
{label: 'Services', icon: ShopIcon, selected: false},
{label: 'Languages', icon: WorldIcon, selected: false},];

并这样称呼它：

    const FocusableListItem: FC<ExportableProps> = (props) => {
  const classes = useStyles(props);

  return (
    <ListItem button key={props.label} className={classes.button} >
      <ListItemIcon>
        <props.icon fill={props.focused || props.selected ? '#6648ff' : '#c4c4c4'}></props.icon>
      </ListItemIcon>
      <ListItemText>{props.label}</ListItemText>
    </ListItem>
  );
};

使用这种道具接口：

interface ExportableProps extends withFocusableProps {
  label: string;
  icon: React.FC<{fill: string}>;
  onClick?: () => void;
  disabled?: boolean;
  selected?: boolean;
  small?: boolean;
}

并且工作完美！不知道它是否会帮助某人，但看起来很有用。

于 2021-11-08T17:24:39.037 回答
0

您需要将变量名大写并使用正常的 Jsx 语法：

const MyComponent = <HelloWorld /> 

render () {
  return <MyComponent name='jamie'/>
}

这允许将组件存储在数组中：

import {
  EmailShareButton,
  FacebookShareButton,
  InstapaperShareButton,
  LineShareButton,
  LinkedinShareButton,
  LivejournalShareButton,
  MailruShareButton,
  OKShareButton,
  PinterestShareButton,
  PocketShareButton,
  RedditShareButton,
  TelegramShareButton,
  TumblrShareButton,
  TwitterShareButton,
  ViberShareButton,
  VKShareButton,
  WhatsappShareButton,
  WorkplaceShareButton,
} from "react-share"

export default class LikeShare extends Component {
  shareButtons = [
    EmailShareButton,
    FacebookShareButton,
    InstapaperShareButton,
    LineShareButton,
    LinkedinShareButton,
    LivejournalShareButton,
    MailruShareButton,
    OKShareButton,
    PinterestShareButton,
    PocketShareButton,
    RedditShareButton,
    TelegramShareButton,
    TumblrShareButton,
    TwitterShareButton,
    ViberShareButton,
    VKShareButton,
    WhatsappShareButton,
    WorkplaceShareButton,
  ]

  render = () => {
    return (
      <div>
        { this.shareButtons.map(
          ShareButton => <ShareButton url={window.location.href}/>
        )}
      </div>
    )
  }
}
于 2020-04-08T06:30:25.313 回答
-1

你也可以使用 setProps

myComponent.setProps({name: 'jamie'});
于 2019-01-20T06:11:14.447 回答