如何在 React.js 中将道具从一个类传递到另一个类 [英] How to pass props from one class to another in React.js

问题描述

我对 React 很陌生.我正在通过创建一个非常简单的九个网格框来练习，用户可以在其中使用下拉菜单选择他们现在想要使用的颜色.唯一的事情是，我不太清楚如何将变量从包含它的类 (ColorPicker) 传递给包含网格的类 (Box).谁能给我一些关于如何做到这一点的指示?

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

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

这是我的代码

//这显示框的颜色选择:红色、绿色和蓝色var ColorPicker = React.createClass({处理改变:函数(e){var newColor = e.target.value;this.props.onChange(color);},渲染:函数(){返回 (
<选择 id=选择颜色";onChange={this.handleChange}><选项值＝红色">红色的</选项><选项值=绿色">绿</选项><选项值=蓝色">蓝色</选项></选择></div>)}});//包含最终会改变颜色的框var Box = React.createClass({获取初始状态:函数(){返回 {//盒子最初是白色的白颜色'};},改变颜色:功能(新颜色){var newColor = this.state.color;这个.setState({颜色:新颜色});},渲染:函数(){返回 (
<div className='box' style={{background:this.state.color}} onClick={this.changeColor}></div></div>);}});

解决方案

React 中的 Props 从父级传递给子级.例如，如果您有一个渲染子类的父类，则父类现在可以将道具传递给子类.这是一个例子.

class Parent 扩展 React.Component {使成为() {返回 (<子示例=foo";/>)}}类子扩展 React.component {使成为() {返回 (<h1>{this.props.example}</h1>)}}

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

访问 example 的值

I'm very new to React. I'm practicing by creating a very simple nine grid box, where a user can select what color they want to use at the moment by using a dropdown menu. The only thing is, I can't quite figure out how to pass the variable from the class that contains it (ColorPicker) to the class that contains the grids (Box). Can anyone give me some pointers on how to do this?

I'm still getting used to passing props to other classes.

Here's a link to the CodePen: http://codepen.io/anfperez/pen/RorKge

Here's my code

//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>
    );
}
});

解决方案

Props in React get passed from the parent to the child. For instance, If you have a parent class which renders a child class, the parent class can now pass props to the child class. Here is an example.

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

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

The parent class renders the child class. The parent class passes a prop to child called example. In child you can have access to the value of example by calling this.props.example

这篇关于如何在 React.js 中将道具从一个类传递到另一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！