在反应组件之间传递道具

Question

I am trying to learn how to break things down into smaller components and decided to start with the following code from Rows.jsx . I think my issue is understanding how props is passed between parent/child components. I've read a number of guides and articles, but I'm confused I'm using import correctly. Or should I be componentizing the handlers? Please help me understand if I'm doing this right or am I going about this in the wrong way.

Rows.jsx ; (previously at the end of 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

Passing properties (props) is unidirectional meaning you can only do it in one direction which is down (parent to child), it seems you understand this and want to pass something from your DynamicTable component to your RenderRows component.

To illustrate how to pass props I'm going to use functional components and I suggest you do so as well but the principle is the same even with class components.

CodeSandbox

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

You can think of props as the component's "parameters". Note that you cannot pass props upwards from RenderRows to DynamicTable .

Hope this helps, for further reading the new React docs have an excellent tutorial of how to pass props.