javascript - reactjs-如何在没有参考的情况下将状态元素传递给孩子？

Question

在上面的代码中，如果 体现在。x如何传递一个父组件（ie ）状态的元素，使得父组件的状态变化不会影响到子组件（ie ）？controldisplaycontroldisplay

class Display extends React.Component{
    render()
    {
        return( <button>{this.props.x}</button> );
    }
}

class Control extends React.Component{

        state={
            x:'Hello'
            }
            
        render()
        {
        const {x}=this.state;

        return(  <Display x={x}/> );

        }
}

标签： javascriptreactjs

Answer 1

这是一个例子。您可以将 prop 值分配给 componentDidMount 中的“实例”变量。ComponentDidMount 只会在Display第一次挂载时运行一次。在下面的示例中，它将分配this.props.xto的值this.x。使用this.something创建一个“实例”变量，该变量将在Display. 当 this.props.x 更改时，它不会被更新/更改（假设 x 是一个原始值，如字符串或数字）。如果你改变它的值，this.x它不会导致重新渲染Display。

class Display extends React.Component{
    componentDidMount() {
      this.x = this.props.x;
    }

    render()
    {
        return( <button>{this.x}</button> );
    }
}

class Control extends React.Component{

        state={
            x:'Hello'
            }
            
        render()
        {
        const {x}=this.state;

        return(  <Display x={x}/> );

        }
}