React：内联样式未应用于子组件

Question

Objective : I have a Main component and a Textarea component. I would like to dynamically size the textarea and its parent container given the scrollHeight of the textarea. Additionally, I also have a Button component, which is a child of Main, that will clear the text from the textarea, but that isn't my immediate concern. Just wanted to add some more context.

Issue : At present, the Main component reflects the correct initial and changed state values. However, the breakdown happens when I try to pass the updated parentHeight and textareaHeight values down to the child component, convert to string, and set the CSS properties within the style property.

As an aside, I've included commented code blocks to illustrate some of the other directions I've gone.

import Textarea from '../textareas/Textarea';
import Buttons from '../button-group/Buttons';

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

        this.state = {
            textareaIsEmpty: true,
            textareaHeight: 'auto',
            parentHeight: 'auto',
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (textareaHeight, parentHeight) => {

        this.setState({
            parentHeight: parentHeight,
            textareaHeight: textareaHeight,
        });
    }

    handleClick = () => {


        this.setState({
            textIsCleared: false,
        });
        
        console.log(this.textIsCleared);
    }

    render() {
        return (
            <section className="section">
                <Textarea handleChange={this.handleChange} />
                <Buttons onClick={() => this.handleClick()} />
                <Textarea handleChange={this.handleChange} />
            </section>
          );
    }
}

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

        // this.state = {
        //     parentStyle: {
        //         minHeight: this.props.parentHeight,
        //     },
        //     textareaStyle: {
        //         height: this.props.textareaHeight,
        //     },
        // }

        this.parentStyle = {
            minHeight: `${this.props.parentHeight}px`,
        }
        
        this.textareaStyle = {
            height: `${this.props.textareaHeight}px`,
        }

       this.onChange = this.onChange.bind(this);

    }

    onChange = (e) => {

        const newTextareaHeight = e.target.scrollHeight;
        const newParentHeight = e.target.parentElement.scrollHeight;
        
        
        this.props.handleChange(newTextareaHeight, newParentHeight);

        this.setStyles();
    }

    setStyles = () => {

        // this.setState({
        //     parentStyle: {
        //         ...this.state.parentStyle,
        //         minHeight: `${this.props.parentHeight}px`,
        //     },
        //     textareaStyle: {
        //         ...this.state.textareaStyle,
        //         height: `${this.props.textareaHeight}px`,
        //     },
        // })

        
    }

    render() {

        const parentStyle = `${this.props.parentHeight}px`;
        const textareaStyle = `${this.props.textareaHeight}px`;

        return (
            <div className="content_wrap" style={{minHeight: parentStyle}}>
            <textarea
                
                className="content_textarea"
                onChange={this.onChange} 
                rows={1}
                style={{height: textareaStyle}}
    
            />                      
        </div>
        )
    }
}

Answer 1

问题可能在于，在Textarea组件中，您试图从 props 读取parentHeight和textareaHeight值，但在Main组件中，您没有将这些 props 传递给子Textarea 。