在反应组件之间传递道具

Question

我正在尝试学习如何将事物分解为更小的组件，并决定从Rows.jsx中的以下代码开始。 我认为我的问题是了解道具是如何在父/子组件之间传递的。 我已经阅读了许多指南和文章，但我很困惑我是否正确使用了import 。 或者我应该对处理程序进行组件化？ 请帮助我了解我是否正确执行此操作，或者我是否以错误的方式处理此问题。

Rows.jsx ; （之前在DynamicTable.jsx的末尾）

import React, { Component } from 'react';

function RenderRows () {
    render() {
        var context = this; //modify this for props?
        return  this.state.combatants.map(function(o, i) {
            return (             
                <tr key={"combatant-" + i}>
                    <td>
                        <input
                            id="initiative"
                            type="text"
                            value={o.initiative}
                            onChange={context.handleCombatantChanged.bind(context, i)}
                        />
                    </td>
                    <td>
                        <input
                            id="name"
                            type="text"
                            value={o.name}
                            onChange={context.handleCombatantChanged.bind(context, i)}
                        />
                    </td>                  
                    <td> 
                        <button onClick={context.handleCombatantDeleted.bind(context, i)}> 
                            Delete
                        </button>
                    </td>
                </tr>
            );
        });
    }    
}
export default RenderRows;

DynamicTable.jsx ；

import React, { Component } from 'react';
import RenderRows from './Rows';

export default class DynamicTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            initiative: "",
            name: "",
            combatants: []
        }
    }

    updateInitiative(event) {
        this.setState({initiative: event.target.value});
    }
    updateName(event) {
        this.setState({name: event.target.value});
    }

    handleClick() {
        var combatants = this.state.combatants; 
        combatants.push({ //pushing each variable to array
            initiative: this.state.initiative,
            name: this.state.name,
        });

        this.setState({
            combatants: combatants,
            initiative: "",
            name: "",
        });
    }

    handleCombatantChanged(i, event) {
        var combatants = this.state.combatants;
        combatants[i] = event.target.value;
        this.setState({
            combatants: combatants
        });
    }

    handleCombatantDeleted(i) {
        var combatants = this.state.combatants;
        combatants.splice(i, 1);
        this.setState({
            combatants: combatants
        });
    }

    render() {
        return (
            <div>New Combatant
                <table>
                    <td>
                        <th>Initiative</th>
                        <input                    
                            id="initiative"
                            type="text"
                            value={this.state.initiative}
                            onChange={this.updateInitiative.bind(this)}
                        />
                    </td>
                    <td>
                        <th>Name</th>
                        <input
                            id="name"
                            type="text"
                            value={this.state.name}
                            onChange={this.updateName.bind(this)}
                        />
                    </td>
                    <td><th></th>
                        <button onClick={this.handleClick.bind(this)}>
                            Add Combatant
                        </button>
                    </td>
                </table>                
                Current Combatants
                <table className="">
                    <thead>
                        <tr>
                            <th>Initiative</th>
                            <th>Name</th>                          
                            <th>Delete</th> 
                        </tr>
                    </thead>
                    <tbody>                        
                        {this.renderRows()} {/* how to pass this? */}
                    </tbody>
                </table>
                {/* <RenderRows />; didn't work here either */}
            </div>
        );
    }

    //RenderRows (Rows.jsx) used to be here
    renderRows() {
        return <RenderRows />;
    }
}

Answer 1

传递属性（props）是单向的，这意味着您只能在一个向下的方向（父到子）上执行此操作，看来您理解这一点并希望将一些东西从您的DynamicTable组件传递到您的RenderRows组件。

为了说明如何传递道具，我将使用功能组件，我建议您也这样做，但即使使用类组件，原理也是一样的。

代码沙盒

function DynamicTable() {
  const myRows = [1, 2, 3, 4];
  return <>
      <RenderRows
         rows={myRows} // "myRows" is being passed as the prop "rows"!
      />
  </>;
}

function RenderRows({ rows }) { // destructuring the props makes it easier to identify which props the component expects
  return <>
      {rows.map(row =>
          <div key={row}>I'm row no. {row}</div>
      )}
  </>;
}

您可以将 props 视为组件的“参数”。 请注意，您不能将道具从RenderRows向上传递到DynamicTable 。

希望这会有所帮助，为了进一步阅读新的 React 文档，有一个关于如何传递道具的优秀教程。