ラッピングビヘイビア・プロップを管理する他のリアクション・コンポーネントの反作用コンポーネント。

Question

私はこのコードをオンラインで見つけました。私はReactを初めて使うので、このエラーを出さずに使用する方法を知りたがっていました。

this.props.children私は身体のスクロール位置への上場を収集し、任意の小道具は、その周りに包まれた子どもたちに反応としてそれを渡そうとするものから機能

ではありません。私は正しいですか？

私は以下のように使用すると、なぜ上記のエラーが発生しますか？アンドリューが言及したよう

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> 
     ) 
    } 

} 

これはthis.props.childrenは関数ではありません、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

です。レンダリング関数で、子コンポーネントをレンダリングする場合、レンダリングは次のように記述されます。あなたの例では

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

、上記のコードは、彼らが子供（ネスト）のコンポーネントであるため、このJSXは、あなたの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> 

をブロック置きます。

これで、子コンポーネントに小道具を渡したいようです。これを行うには、React.Childrenにアクセスします。

すべての子コンポーネントcan be found hereに小道具としての機能を渡すの素晴らしい例：あなたが `` this.props.children（...、...）を達成するために何をしようとしている

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>