为什么forEach会显示出我的输出混乱？ （React.Children.forEach方法）

Question

我有这段代码向我两次在控制台中显示文本。为什么？

const { Children } = React
const { render } = ReactDOM

const Display = ({children}) => Children.forEach(children, child => 
      console.log(child.props.children))

render(
    <Display> 
         <h1>Child 1</h1> 
         <h1>Child 2</h1> 
         <h1>Child 3</h1> 
    </Display>
, document.getElementById('react-container'))

控制台显示以下内容： 儿童1 儿童2 儿童3 儿童1 儿童2 儿童3

Answer 1

Display没有返回有效值，这导致ReactDom.render发生意外行为。在return null中添加一个Display。