React：将组件作为 prop 传递，而不使用 this.props.children

我有这个组件Foo.js:

// a svg component with a star.svg icon
import { IconStar } from 'react-svg-icons'; 

// call a button with a custom icon
<Button icon={ IconStar }> Click to trigger </Button>

然后继续button.js I have:

render() {
  const theIcon = this.props.icon;
  return (
    <button>
      {this.props children}
      {icon() /*this works but i can't pass props inside it*/} 
      <theIcon className={ Styles.buttonIcon } />
    </button>
  )
}

我想渲染<IconStar> inside <Button>， 我怎么做？。

我不能将其传递为this.prop.children因为它有更多围绕 icon 属性的逻辑，但在本例中我仅展示一个演示。

Thanks

您唯一错过的是，对于要转换为 JS 自定义组件的 JSX，应该以大写字母开头命名，例如<TheIcon />，而小写字母表示原生 DOM 元素，例如<button />.:

render() {
  const TheIcon = this.props.icon;  // note the capital first letter!
  return (
    <button>
      {this.props.children}
      <TheIcon className={ Styles.buttonIcon } />
    </button>
  )
}

https://jsfiddle.net/03h2swkc/3/ https://jsfiddle.net/03h2swkc/3/