Question

在我的应用程序中，我具有以下要使其可重用的代码。我尝试根据以下代码制作组件，但是<td>的内容有多种类型，并且可能有所不同。在某些情况下，我需要第一个<td>的内容为字符串，而在其他情况下，我需要将其为<Button>。

如何在可重用组件的第一个<td>中获得像这样的动态内容？

const educationList = props.education.map(edu => (
  <tr key={edu.id}>
    <td>{edu.school}</td>
    <td>{edu.degree}</td>
    <td>
      <Moment format="YYYY/MM/DD">{edu.from}</Moment> -
      {edu.to === null ? (
        ' Now'
      ) : (
        <Moment format=" YYYY/MM/DD">{edu.to}</Moment>
      )}
    </td>

    <td>
      <Button
        className="btn btn-danger"
        text="Delete"
        onClick={() => props.deleteEducation(edu.id)}
      />
    </td>
  </tr>
))

Answer 1

如果我正确理解了您的问题，也许您可以定义一个通用的<TableRow>组件，如下所示，其中：

定义了相同的常规表行结构，可以重复使用
<td>的第一个<TableRow>的内容可以在外部指定，从而使您可以将动态内容呈现到公共的周围行结构中

TableRow

/* Define TableRow functional component. This allows reuse of code for general row
structure while also allowing external control over the contents of the first <td> 
*/
const TableRow = (props) => {

    const { education } = props;

    return (<tr key={education.id}>
        { /* Render the children components of this TableRow via props.children */ }
        <td>{ props.children }</td>
        <td>{education.degree}</td>
        <td>
        <Moment format="YYYY/MM/DD">{education.from}</Moment> -  
        {education.to === null ? ' Now' : <Moment format=" YYYY/MM/DD">{education.to}</Moment> }
        </td>
        <td>    
        <Button
            className='btn btn-danger'
            text='Delete'
            onClick={() => props.deleteEducation(education.id)} />
        </td> 
    </tr>)
}

用法

{ /* Example of how to use TableRow */ }
const educationList = props.education.map(edu => ( 
    <React.Fragment>

        { /* Render a button in first <td> of table row */ }
        <TableRow education={edu} deleteEducation={this.deleteEducation} >
            <button>Example button row</button>
        </TableRow>

        { /* Render another table row with string in first <td> of table row */ }
        <TableRow education={edu} deleteEducation={this.deleteEducation} >
            { `Example string row` }
        </TableRow>

    </React.Fragment>))

请注意，此用法示例的目的是说明如何使用<TableRow>来呈现公共表行结构的前<td>中的不同类型的内容，而并不表示如何您实际上将在代码中使用此组件。

希望这会有所帮助！

Answer 2

这已经是一个组成部分，但是没有状态。如果要使其成为一门课，它应该像这样

class EducationList extends React.Component() {
constructor(){
    super()
}

const educationList = props.education.map(edu => ( 
    <tr key={edu.id}>
       <td>{edu.school}</td>
       <td>{edu.degree}</td>
       <td>
          <Moment format="YYYY/MM/DD">{edu.from}</Moment> -  
          {edu.to === null ? ' Now' : <Moment format=" YYYY/MM/DD">{edu.to}</Moment> }
       </td>

       <td>    
          <Button
             className='btn btn-danger'
             text='Delete'
             onClick={() => props.deleteEducation(edu.id)}
          />
       </td> 
    </tr>
 ));  

 render() {
     return(
        {educationList}
     )
 }

}

ReactJS：创建具有动态内容的可重用表行组件

2 个答案:

TableRow

用法