Question

我有一个按钮列表，所有按钮都需要有自己的名称。我已经创建了一个按钮组件以重用，但是我不确定如何给每个按钮赋予正确的名称。

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;

Answer 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;

Answer 2

这是您将如何执行的操作。基本上，您需要具有一个要渲染的项目数组，即代码注释中编写的items。然后，您可以使用地图对其进行迭代。

我还更新了Button组件，因为组件的开始和结束标记之间的任何内容都以children的形式传递给该组件，您可以用它来呈现该组件内部的封装项目。 / p>

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;

为每个按钮指定正确的名称

2 个答案: