Question

我收到以下错误：

这是我的代码：

import React from 'react'
import ReactDOM from 'react-dom';

class Container extends React.Component {
    render() {
        const props = this.props.children.map(child => child.props.prop)
        console.log('Props: ', props)
        return <div>{ this.props.children.map(child => child.props.children) }</div>
    }   
}

export class App1 extends React.Component {

    render() {
        return(
            <Container>
                <div prop="1"><p>Child 1</p></div>
                <div prop="2"><p>Child 2</p></div>
                <div prop="3"><p>Child 3</p></div>
            </Container>
        )
    }
}

export class App2 extends React.Component {
    render() {
        const nrs = ["1", "2", "3"]
        return(
            <Container>
                { nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>) }
            </Container>
        )
    }
}

export class App3 extends React.Component {
    render() {
        const nrs = ["2", "3"]
        return(
            <Container>
                <div prop="1"><p>Child 1</p></div>
                { nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>) }
            </Container>
        )
    }
}

ReactDOM.render(<App3 />, document.getElementById('root'));

App1（仅适用于“静态”子代）和App2（仅适用于生成的子代）可以正常工作，并且看起来等效。我希望App3可以做同样的事情，但是我却得到了上面的错误。

如何在容器组件中组合“静态”子代和生成的子代？

Answer 1

将静态子级和动态子级一起添加时，您的解决方案无法正常工作。尽可能将所有元素都放在一个数组中，

跟随是一种可能的方式。您可以根据自己的需求找到一种非常有效的方法。

render(){
    const nrs = ["2", "3"]
    const staticChild = <div prop="1"><p>Child 1</p></div>
    const elements = nrs.map(nr => <div prop={nr}><p>Child {nr}</p></div>)
    elements.push(staticChild)
        return(
            <Container>                
                { elements }
            </Container>
        )
}

Answer 2

在您的容器组件中，您不需要进行分解和重新分配任何道具。它会自动附加。

您的容器应该是这样

class Container extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

Click this link表示codeSandbox中正在执行的代码。

修改

如果您需要容器组件来更改其子代的属性，则无法直接进行映射，需要使用React.Children实用程序。

React.Children.map(this.props.children, (child) => child.props)

阅读here了解更多信息

Answer 3

您可以使用版本16.8中的React Hooks来映射您的道具

import React, {useState} from 'react'

export const Item = (props) => {
  const {text} = props
  return (
    <div>
      <h1>{text.heading}</h1>
      <h2>{text.subheading}</h2>
    </div>
  )
}

export default (props) => {
  const [state, setState] = useState({
    items: [
      {
        text: {
          heading: 'Test heading',
          subheading: 'Test subheading'
        }
      }
    ]
  })

  return (
    <div>
      {state.items.map((item, index) => {
        return <Item key={index} {...item} />
      })}
    </div>
  )
}

反应：如何构造孩子

3 个答案: