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

Posted 2023-02-23

【中文标题】如何在 React.js 中将道具从一个类传递到另一个类

【英文标题】：How to pass props from one class to another in React.js

【发布时间】：2017-04-01 11:12:42

【问题描述】：

我对 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>
    );

);

【参考方案1】：

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

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


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

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

【讨论】：

不需要useContext吗？

本身不需要使用上下文。当你的 props 需要向下传递很多层时，上下文非常有用，因此我们可以使用上下文直接转到需要数据的组件，而不是从一层向下传递到另一层。与其说是需要，不如说是拥有。

【参考方案2】：

您应该渲染一个主要组件来包装其他组件，而不是渲染到 DOM 10 次。您可以在其他组件中重用组件并向下传递道具。

【参考方案3】：

您必须使用另一个包含这两者的组件，并将所选颜色作为其状态进行管理。当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 将其状态传递给其他组件。

【参考方案4】：

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

【参考方案5】：

您必须为每个应用调用一次 React.render，因为每次调用都意味着为某些新应用创建了新的虚拟 DOM 您必须了解虚拟 DOM 概念并在其渲染方法中在***应用程序容器组件中实现您的标记 在纯粹的情况下，像这个例子一样，你必须通过 App 组件状态连接所有数据，这意味着 ColorPicker 组件在更改颜色时将其存储在 App 状态，从中它会通过更改的值更新 Box 组件道具，但是如果你开发更复杂的应用程序，您必须使用 redux 或 Flux 概念来组织数据存储，这也是在同一页面上的多个应用程序之间交换数据的正确方式

所以，here 正确的代码，它实现了您的示例

【参考方案6】：

你可以这样做

var ColorPicker = React.createClass(
 getInitialState: function() 
  return color: 'white'
 ,
 handleChange: function(e) 
  var newColor = e.target.value;
  this.setState(color: newColor)
 ,

 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>
    <Box color=this.state.color />
    <Box color=this.state.color />
    <Box color=this.state.color />
  </div>
 )

);

//contains the boxes that will eventually change color
var Box = React.createClass(
 render: function() 
  return (
   <div >
    <div className='box' style=background:this.props.color> 
    </div>
   </div>
  );
 
);

ReactDOM.render(<ColorPicker />, document.getElementById('pick_color'));

而不是多次渲染该框或使用上面@gesuwall 的建议。我认为他的方法是更有效的方法。

【参考方案7】：

在将属性从父级传递给子级时，需要使用componentDidUpdate()方法来收集，并使用属性。否则，属性可能尚未初始化，并导致子组件中的值为空。我修改了上面的代码以包含 componentDidUpdate() 方法。

class Parent extends React.Component 
    render() 
        return (
            <Child bandName="foo fighters" />
        )
    


class Child extends React.Component 

    //For props, you use componentDidUpdate
    componentDidUpdate(prevProps)

      //You must have an if check, or loop forever
      if(this.props.bandName !== this.prevProps.bandName)
         //do something like make an API call
         //perhaps set this on state for display
      
    

    render() 
        return (
            <h1>this.props.bandName</h1>
        )
    

【讨论】：

感谢您抽出宝贵的时间留下这个答案，您能否更新它以包含描述/解释？