在另一个 React 中渲染组件

Question

Ok i'm so lost, i tryied finding the answer in old threads but i couldn't find anything that would help me. My code looks like this

class Background extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bgColor: [
                'red',
                'blue',
                'yellow',
              ],
              selectedColor: ''
        }
    }
    componentDidMount(){
        this.getRandomColor();
    }
    getRandomColor(){
        var item = this.state.bgColor[Math.floor(Math.random()*this.state.bgColor.length)];
        this.setState({
          selectedColor: item,
        })
      }
      render(){
          return(
            <div style={{backgroundColor: this.state.selectedColor}}>
                <h1>Quote Generator</h1>
            </div>
          )
      }
}

class Count extends React.Component{
    constructor(props){
        super(props);
        this.state={
            count: 0
        }
    }
    addNumber(){
        this.setState({
            count: this.state.count +1
        })
    }
    render(){
        return(
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.addNumber.bind(this)}>ADD A NUMBER</button>
            </div>
        );
    }
}

class QuoteGenerator extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <Background>
                               <Count/>
            </Background>
            

        );
    }
}

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

the problem is that it only renders the Background component, while the Count component remains invisible, no errors or anything, and i can't figure out why, any help is gladly appreciated.

Answer 1

You want to use props.children in your Background component

render(){
   return(
      <div style={{backgroundColor: this.state.selectedColor}}>
         <h1>Quote Generator</h1>
         {this.props.children}
      </div>
   )
}