Question

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

因此，我们可以将react组件存储在变量中。但是现在，我想知道是否可以将props传递给组件（如果它存储在变量中）？

//////////////////////////////////////////////
//////  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中是否有这样的功能。

Answer 1

您可以尝试以下操作，

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

参考文档：React Official Doc

Answer 2

您需要将变量名大写并使用普通的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>
    )
  }
}

Answer 3

您也可以像

一样使用setProps

myComponent.setProps({name: 'jamie'});

在存储在变量中的组件中传递道具

3 个答案: