React js從子組件到母組件接收道具

Question

讓，我們有一個這樣的父組件，

import React from 'react';

export default class ParentComp extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='padding'>
                {this.props.children}
            </div>
        );
    }
}

好的，現在我想像這樣使用這個組件

<ParentComp fillbg="#389457">
      content goes here.......
</ParentComp>

需要在父組件中更改什么才能應用該背景（fillbg）

Answer 1

import React from 'react'

export default const ParentComp = ({children, fillbg}) => (
    <div className='padding' style={{backgroundColor: fillbg}}>
        {children}
    </div>
);

Answer 2

將它作為道具傳遞給您的組件並使用它

import React from 'react';

export default class ParentComp extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='padding' style={{backgroundColor: this.props.fillbg}}>
                {this.props.children}
            </div>
        );
    }
}

像這樣傳遞 fillbg 道具

<ParentComp fillbg="#389457">
      content goes here.......
</ParentComp>