Question

我在网上找到了这个代码，因为我是React的新手，想知道如何使用它而不会出现此错误。

this.props.children不是函数

从我收集它的列表到身体滚动位置，并尝试将它作为道具传递给任何React儿童。我对么？

如果是这样，为什么上面的错误在我使用它时如下所示。

import React, {Component} from 'react';
import Nav from './nav';
import styles from '../../styles/header.scss';
import bgCover from '../../images/homeslider.jpg';
import Scroll from '../utils/scroll';

export default class Header extends Component{

    render(){
        return(
            <Scroll>
                <div id='header'>
                    <div className="container">
                        <img src={bgCover} id='bg-cover' alt="background-image" />
                        <div id="temp-text">HEADER</div>
                        <Nav />
                    </div>
                </div>
            </Scroll>
        )
    }

}

这是 scroll.js 文件

import React, {Component} from 'react';

export default class Scroll extends Component {
  constructor(props) {
    super(props);

    this.state = { scrollTop: 0,
                   scrollLeft: 0 };

    window.addEventListener('scroll', event => {
      this.setState({ scrollTop: document.body.scrollTop,
                      scrollLeft: document.body.scrollLeft});
    });
  }

  render() {
    return this.props.children(this.state.scrollTop, this.state.scrollLeft)
  }
}

Answer 1

正如安德鲁所说，this.props.children不是一种功能。在渲染功能中，如果你想渲染子组件，那么你的渲染就会写成这样的东西。

 render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }

在您的示例中，上面的代码将放置此JSX块

       <div id='header'>
            <div className="container">
                <img src={bgCover} id='bg-cover' alt="background-image" />
                <div id="temp-text">HEADER</div>
                <Nav />
            </div>
        </div>

进入Scroll组件，因为它们是子组件（嵌套组件）。

现在，您似乎想要将道具传递给您的子组件。您可以通过添加访问React.Children来完成此操作。

将函数作为prop传递给所有子组件can be found here的一个很好的示例：

doSomething: function(value) {
  console.log('doSomething called by child with value:', value);
}
const childrenWithProps = React.Children.map(this.props.children,
 (child) => React.cloneElement(child, {
   doSomething: this.doSomething
 })
);

return <div>{childrenWithProps}</div>

将React组件包装在管理行为道具的其他React组件中。

1 个答案: