主页 / 问题 / 1421828
Accepted
Евгений Колмак
Asked:2022-08-19 21:15:22 +0800 CST2022-08-19 21:15:22 +0800 CST

处理 React 集合

  • 772

有一个组件

<Definitions data={definitions} />

它接受道具一个对象

const definitions = [
  { dt: 'one', dd: 'two' },
  { dt: 'another term', dd: 'another description' },
];

应该渲染

<dl>
  <dt>one</dt>
  <dd>two</dd>
  <dt>another term</dt>
  <dd>another description</dd>
</dl>

我知道如何获取集合和渲染，但我不知道如何嵌套。
抛出错误

警告：validateDOMNesting(...):<dd>不能作为<dt>.

这是我要写的：

export default class Definitions extends Component {


  render() {
    const { data } = this.props;
    return <dl>
      {data.map((item, index) => <dt key={index}>{item.dt}
      </dt>)}
    </dl>
  }
}
javascript reactjs

1 个回答

  1. Best Answer

    在这种情况下，您需要React.Fragment用作显示两个相邻元素的容器

    function Definitions({data}){
    return (<dl>
      {
        data.map((item, index) => <React.Fragment key={index}>
          <dt>{item.dt}</dt>
          <dd>{item.dd}</dd>
        </React.Fragment>)
      }
    </dl>)
}

function App(){
  const definitions = [ { dt: 'one', dd: 'two' }, { dt: 'another term', dd: 'another description' } ]; 
  return <Definitions data={definitions} />;
}

ReactDOM.render(<App />, document.getElementById('container'))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id="container"></div>

    • 1

相关问题