reactjs - 如何将组件存储在对象中？ react

Question

我正在尝试构建多个按钮，每个按钮都有一个特定的图标。我试过创建一个对象来存储名称，但我也想存储图标，就像这样它什么都不做。如何将组件存储在对象中？

import React from 'react'
import './navbar.css'
import HomeIcon from '@material-ui/icons/Home';

function Navbar() {

  const data = [
    {name: "Home", icon:<HomeIcon />},
    {name: "Explore"},
    {name:"Notifications"},
    {name: "Messages"},
    {name: "Saved"},
    {name: "Lists"},
    {name: "Profile"},
    {name: "More options"},
  ]

    return (
        <div>
          <div className="tweetpage_____leftsection">
            <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" className="twitterlogo____tweetpage"/>
            {data.map(btn => {
              return <button className="navbar______button" startIcon={btn.icon}>{btn.name}</button>
            })}
            <button className="tweet_____button">Tweet</button>
          </div>
        </div>
    )
}

export default Navbar

Answer 1

您的尝试应该可以正常工作，问题可能存在于处理 startIcon 属性的 button 组件中。

考虑此示例以显示按预期呈现的组件:

function FakeIcon(props) {
    return (
        <div>{'Icon'}</div>
    )
}

class Example extends React.Component {
    render() {
        const data = [
          {name: "Home", icon: <FakeIcon />},
          {name: "Test", icon: <FakeIcon />}
        ]

        return (
            <React.Fragment>
                {data.map(btn => {
                    return (
                      <div>
                        <button className="navbar______button">{btn.name}</button>
                        {btn.icon}
                      </div>
                    );
                })}
            </React.Fragment>
        );
    }
}


ReactDOM.render(<Example />, document.body);

body      { display: flex; flex-direction: column; }
div       { display: flex; }
button    { width: 75px; margin-right: 15px }
body > div:not(:last-child) { margin-bottom: 15px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>