如何在 React.js 中将props从一个类传递到另一个类

IT技术 javascript class reactjs components
2021-05-06 03:17:01

我对 React 很陌生。我正在通过创建一个非常简单的九个网格框来练习，用户可以在其中使用下拉菜单选择他们目前想要使用的颜色。唯一的问题是，我无法弄清楚如何将变量从包含它的类（ColorPicker）传递到包含网格的类（Box）。谁能给我一些关于如何做到这一点的指示？

我仍然习惯于将 props 传递给其他类。

这是 CodePen 的链接：http ://codepen.io/anfperez/pen/RorKge

这是我的代码

//this displays the color selections for the boxes: red, green, and blue
var ColorPicker = React.createClass({

handleChange: function(e) {
    var newColor = e.target.value;
    this.props.onChange(color);

},

render: function() {
    
return (
    <div>
        <select id="pick-colors" onChange={this.handleChange}>
            <option value="red">
                Red 
            </option>

            <option value="green">
                Green 
            </option>

            <option value="blue">
                Blue 
            </option>

        </select>

    </div>
    )
}
});

//contains the boxes that will eventually change color
var Box = React.createClass({
getInitialState: function() {
    return {
      //boxes are initially white
        color: 'white'
    };
},

    changeColor: function(newColor) {
        var newColor = this.state.color;
        this.setState({
            color: newColor
        });

    },

render: function() {
    return (
    <div >
    <div className='box' style={{background:this.state.color}} onClick={this.changeColor}> 
    </div>
    </div>
    );
}
});
4个回答

React 中的props从父级传递给子级。例如，如果您有一个呈现子类的父类，则父类现在可以将props传递给子类。这是一个例子。

class Parent extends React.Component {
    render() {
        return (
            <Child example="foo" />
        )
    }
}

class Child extends React.component {
    render() {
        return (
            <h1>{this.props.example}</h1>
        )
    }
}

父类渲染子类。父类将一个 prop 传递给名为 的子类example。在 child 中，您可以example通过调用来访问的值this.props.example

与其渲染到 DOM 10 次，您应该渲染一个主要组件，它包装了其他每个组件。您可以在其他组件中重用组件并将 props 向下传递。

您必须使用另一个包含这两个组件并将所选颜色管理为其状态的组件。当ColorPicker获得一个新值时，容器的状态会更新，并Box从容器状态中获取它的颜色值。

ColorPicker 应该从 props 获取回调以在颜色值更改时执行。

var ColorPicker = React.createClass({

render: function() {

return (
    <div>
        <select id="pick-colors" onChange={this.props.onChange}>
            <option value="red">
                Red 
            </option>

            <option value="green">
                Green 
            </option>

            <option value="blue">
                Blue 
            </option>

        </select>

    </div>
    )
}
});

var App = React.createClass({
    getInitialState: function() {
        return {
             selectedColor: '#FFFFFF'
        }    
    },
    onColorPicked: function(e) {
        this.setState({selectedColor: e.target.value })
    },
    render: function() {
        return (
            <div>
              <ColorPicker onChange={this.props.onColorPicked} />
              <Box color={this.state.selectedColor} />
            </div>
        )
    }

}

唯一的有状态组件应该是App. 它通过 props 将其状态传递给其他组件。

在这种情况下，您需要将状态提升到包含 ColorPicker 和 Box 类的父组件中。然后新的父组件将负责管理当前的颜色状态，并处理对它的任何更改。有关提升状态的reactJS 文档将对您有所帮助。

其它你可能感兴趣的问题
上一篇如何3D打印没有平底和中间孔的五角星形物体？ 下一篇如何在子目录中为 React App 配置我的 .htaccess 文件？