如何从父组件访问嵌套组件？

Question

我想从父组件访问嵌套组件。

这是 Bill Form.jsx

      import BillDetailForm from './BillDetailForm';


         render(){

          return (
            <form onSubmit={handleSubmit}>

             <FieldArray

               name= 'detail'
               component={BillDetailForm}
               placeholder= '...detail'
               label='Detail'

                 />
               </form>
                  );
                   }
               }

BillForm 是父组件。

这是 BillForm 的嵌套组件或子组件：BillDetailForm.jsx

     render(){


    return(
         <form onSubmit={ handleSubmit }>


       <div>Detail:</div>
      <FieldArray
        name= 'detail'
        component={RenderDetail}
        label='Detail'
      />

      </form>

    )

} 

BillDetailForm 里面是 RenderDetail:

        const RenderDetail = ({fields, meta: { error,submitFailed}},props) => (
          <dl>
         <dt>
            <button type="button" className= 'btn btn-primary' onClick={() => fields.push()}>Add 
        Detail</button>
             {submitFailed && error && <span>{error}</span>}
           </dt>
               { fields.map((registerDetail, index) =>
               //In the following line renderDetail is accesing Detail component.
               <Detail detailItem={registerDetail} fields={fields} index={index} key={index}/>

               )
             }

            {error && <dt className="error">{error}</dt>}
            </dl> 
            );

这是细节类组件：

          class Detail extends Component{

                   render(){

                   const{detailItem,index,fields,isSubtotal} = this.props;

                        return(


                    <dd key={index}>
                    <br></br>
                    <button className= 'btn btn-light mr-2'
                     type="button"
                     title="Remove detail"
                     onClick={() => { fields.remove(index)
                      if(fields.length == 0 || fields.length === undefined){

                        }
                      try{
                     for(let x in fields){
                     fields.remove(index) 
                     let d = fields.selectedIndex;
                    if(fields.remove(index) && d >= 1 && d< fields.length ){
                    fields.removeAll(index);
                     }
                     }
                  }catch{console.info("deletes non numerical index")}

                      }}> Delete </button>

              <h4>DetailRegister #{index + 1}</h4>

               <Field 
                 id={`${detailItem}._id`}
                 name={`${detailItem}.quantity`}
                 component= {NumberPickerInteger}
                 placeholder= '...quantity'
                 label = "Quantity" 
                  />
          <br></br>
          <h3><b>Product</b></h3>
               <Field 
                id={`${detailItem}._id`}
                name={`${detailItem}.product.code`}
                type="number"
                component= {RenderFieldNumeric}
                placeholder='...Product's code'
               label = "Product's code" 
             />
          <Field 
           id={`${detailItem}._id`}
           name={`${detailItem}.product.name`}
           type="text"
           component= {RenderField}
           placeholder='...Product's name'
           label = "Product's name" 
         />
            <Field 
              id={`${detailItem}._id`}
              name={`${detailItem}.product.price`}
              component= {NumberPickerr}
              placeholder= '...Price'
              label = "Product's price" 
             />
         <br></br>
      <h3><b>Subtotal</b></h3>
       <Field 
          id={`${detailItem}._id`}
          name={`${detailItem}.subtotal`}
          component= {SubtotalWidget}
          placeholder= '...subtotal'
          label = "Subtotal" 
           >
            {isSubtotal}
             </Field>



            </dd>

            );

          }
       }

我想访问 BillForm 中的详细信息，例如 ${props.detailItem}.subtotal。 BillForm访问BillDetailForm，BillDetailForm访问renderDetail，最后一个renderDetail访问Detail。

问题是：如何通过 BillForm 的动态索引 (props.index) 访问和使用数量和小计等道具？我想从 BillForm 访问 Detail 组件，遵守以下顺序访问：BillForm -> BillDetailForm -> RenderDetail -> Detail

Answer 1

如果我正确理解你的意思，你似乎违背了 React 的精神。如果您的父组件想要访问一段数据，那么该数据应该从父组件开始并向下传递。这样，如果数据发生变化，它将调用组件的重新渲染并更新所有必要的组件。

其他一些建议。尽量不要在组件处理程序中包含太多逻辑，它看起来很乱，并且会在每个渲染周期运行。将其抽象为类的方法，并在需要时调用它。

我的示例有望帮助您解决问题，但我建议您阅读 React 文档，因为它非常适合简单的示例。 类的使用最终会被弃用，取而代之的是函数组件和 Hooks API。

class ParentComponent {
  state = {
    value: 0,
  }

  methodToDoSomething = (passedVal) => {
    this.setState({
      value: passVal,
    });
  }

  render() {
    const myState = this.state;
    return (
     <Component {...myState} />
    )
  }
}

class Component {
  state = {}

  render() {
    const { value , methodToDoSomething } = this.props;
    return (
     <div onClick={methodToDoSomething}>
      {value}
     </div>
    )
  }
}

// Hooks API

const ParentComponent = () => {
  
  const [stateVal, updateState] = React.useState('myString');

  return (
    <div>
      {stateVal}
      <Component passedVal={stateVal} passedHandler={updateState} />
    </div>
  )
}

const Component = ({ stateVal, passedHandler }) => {
  
  function updateMyValue() {
    passedHandler('menewvalue');
  }

  return (
    <div onClick={updateMyValue}>
     {stateValue}
    <div/>
  )
}

为避免大量传递所有子组件，我建议阅读 Context Hook。

*** 更新 *** 上面的例子是初步的，并试图回答提出的问题，总是有很多方法可以解决一个问题。

传递道具可能会很麻烦，并且会产生维护开销。大多数大型应用程序将受益于使用状态库来管理其全局状态。 Context API 是一个很好的工具，可以用来包装一组有凝聚力的组件，这样它们就可以共享数据/道具而无需进行道具钻探（将道具传递给许多子组件）。

自定义挂钩是共享数据的另一种好方法。创建一个包含您的数据和任务的任何其他方法的钩子，并在父组件和子组件中使用此钩子来共享所述数据。