React中如何让Tooltip内的对象值每行显示一个

Since you've already enabled the html prop on ReactTooltip, we can leverage that to render proper line breaks between your error messages. Here's a straightforward fix:

Step 1: Format Error Messages with HTML Line Breaks #

Instead of passing the raw array from Object.values(item.error), we'll join each error with an HTML <br> tag. The html prop on your ReactTooltip will parse this as actual line breaks instead of plain text.

Update your tooltip call code like this:

{ columnTitles.map((item, index) => (
  <th key={index} className="regular center" style={{ height: 80 }}>
    { item.error && (
      <Tooltip 
        text={
          Object.values(item.error).length 
            ? Object.values(item.error).join('<br>') 
            : 'Error no especificado'
        } 
        type="warning" 
        element={ <span className="color-dark-grey">&#x26A0;</span> } 
      /> 
    ) }
    <span className="inline-block truncate h6 align-middle"> {item.title} </span>
  </th>
)) }

Step 2: Confirm Tooltip Component Setup #

Your existing Tooltip component is already correctly configured with the html prop, which is critical for making this work. No changes needed here, but just to validate:

class Tooltip extends PureComponent {
  render() {
    const { text, element, type, place } = this.props;
    return (
      <div data-tip={text} className="m0 p0">
        {element}
        <ReactTooltip type={type} place={place} effect="solid" className="tooltip-top" html />
      </div>
    );
  }
}

Alternative: Use a Bulleted List for Better Readability #

If you want more structured error display, you can format the errors into an unordered list instead:

text={
  Object.values(item.error).length 
    ? `<ul>${Object.values(item.error).map(err => `<li>${err}</li>`).join('')}</ul>` 
    : 'Error no especificado'
}

This will render each error as a separate list item, which can be easier to scan for longer sets of errors.

内容的提问来源于stack exchange，提问作者Lizz Parody