为每个单独的按钮提供正确的名称答案

【问题标题】：Giving each individual button it's correct name为每个单独的按钮提供正确的名称
【发布时间】：2019-08-22 18:56:25
【问题描述】：

我有一个按钮列表，它们都需要有自己的名称。我创建了一个按钮组件以供重复使用，但我不确定如何为每个单独的按钮指定正确的名称。

import Button from '../../../UI/Button/Button';
import classes from './SideMenuHeader.module.css';


const SideMenuHeader = () => {
    return(
        <div className={classes.SideMenuHeader}>
            <li>32</li>
            <li><Button></Button></li> // label = project
            <li><Button></Button></li> // label = task
            <li><Button></Button></li> // label = date
            <li><Button></Button></li> // label = title
            <li><Button></Button></li> // label = newest
        </div>
    );
}

export default SideMenuHeader;

-------------
Button component

import React from 'react';
import classes from './Button.module.css';

const button = (props) => (
    <button className={classes.button}></button>
);

export default button;

【问题讨论】：

你的名字是什么意思。你想添加name的自定义属性还是只想给每个按钮一个不同的标签<Button>name</Button>
一个不同的标签@Dimensionless
转到 https://www.w3schools.com 并熟悉 html 元素属性。

标签： javascript reactjs button

【解决方案1】：

试试这样的：

import Button from '../../../UI/Button/Button';
import classes from './SideMenuHeader.module.css';


const SideMenuHeader = () => {
  return (
    <div className={classes.SideMenuHeader}>
      <li>32</li>
      <li><Button name="project" /></li>
      <li><Button name="task" /></li>
      <li><Button name="date" /></li>
      <li><Button name="title" /></li>
      <li><Button name="newest" /></li>
    </div>
  );
}

export default SideMenuHeader;

// Button component

import React from 'react';
import classes from './Button.module.css';

const button = (props) => (
  <button className={classes.button} name={this.props.name}>{this.props.name}</button>
);

export default button;

【讨论】：

【解决方案2】：

这是你将如何做到的。基本上，您需要有一个要呈现的项目数组，即代码注释中所写的items。然后使用 map 对其进行迭代。

我还更新了Button 组件，因为组件的开始和结束标记之间的任何内容都作为children 属性传递给组件，您可以使用它来呈现组件内的封装项。

import Button from '../../../UI/Button/Button';
import classes from './SideMenuHeader.module.css';

// items will be an array containing list
// list of all the button along with all the
// necessary options
//
// const items = [
//  { label: 'project' },
//  { label: 'task' },
//  { label: 'date' },
//  { label: 'title' },
//  { label: 'newest' },
// ]
const SideMenuHeader = ({items}) => {
    return(
        <div className={classes.SideMenuHeader}>
            <li>32</li>
            {
              items.map((item, index) => {
                return <li><Button key={index}>{ item.label }</Button></li>
              })
            }
        </div>
    );
}

export default SideMenuHeader;

-------------
Button component

import React from 'react';
import classes from './Button.module.css';

const button = ({ children }) => (
    <button className={classes.button}>{children}</button>
);

export default button;

【讨论】：