Javascript 如何从父组件访问react中的嵌套组件？

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

这是Bill Form.jsx

      import BillDetailForm from './BillDetailForm';


         render(){

          return (
            <form onSubmit={handleSubmit}>

             <FieldArray

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

                 />
               </form>
                  );
                   }
               }

从“/BillDetailForm”导入BillDetailForm；
render（）{
返回(
);
}
}

BillForm是父组件

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

     render(){


    return(
         <form onSubmit={ handleSubmit }>


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

      </form>

    )

} 

render（）{
返回(
详情：
)
} 

内部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> 
            );

const RenderDetail=（{fields，meta:{error，submitFailed}}，props）=>(
fields.push（）}>Add
细节
{submitFailed&&error&&{error}
{fields.map（（registerDetail，index）=>
//在下一行中，renderDetail正在访问详图构件。
)
}
{error&&{error}
);

这是详细信息类组件：

          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>

            );

          }
       }

类详细信息扩展组件{
render（）{
const{detailItem，index，fields，isSubtotal}=this.props；
返回(



{字段。删除（索引）
if（fields.length==0 | | fields.length==未定义）{
}
试一试{
for（让x在字段中）{
字段。删除（索引）
设d=fields.selectedIndex；
if（fields.remove（index）&&d>=1&&d删除
详细寄存器#{index+1}



产品
如果我正确理解您的意思，那么您似乎违反了React的精神。如果您的父组件希望访问一段数据，那么该数据应该从父组件开始并向下传递。这样，如果数据发生更改，它将调用组件的重新呈现，并更新所有必要的组件

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

我的示例希望能帮助您解决问题，但我建议您阅读React文档，因为它非常适合简单的示例。
类的使用最终将被弃用，取而代之的是函数组件和钩子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/>
  )
}

类父组件{
状态={
值：0，
}
methodToDoSomething=（passedVal）=>{
这是我的国家({
值：passVal，
});
}
render（）{
const myState=this.state；
返回(
)
}
}
类组件{
状态={}
render（）{
const{value，methodToDoSomething}=this.props；
返回(
{value}
)
}
}
//钩子API
常量ParentComponent=（）=>{
const[stateVal，updateState]=React.useState（'myString'）；
返回(
{stateVal}
)
}
常量组件=（{stateVal，passedHandler}）=>{
函数updateMyValue（）{
passedHandler（'menewvalue'）；
}
返回(
{stateValue}
)
}

为了避免将大量内容传递给所有子组件，我建议您阅读上下文挂钩。
为什么不使用状态管理？我不知道如何使用它。它在代码中是如何使用的？当您处理react时，不要用HTML来思考，要用共享的数据来思考，现在状态将如何使用它的帮助是，它将是所有数据的中心点，您可以从组件中的任何位置访问数据。请参阅Redux。遵循本教程：如果您不想变得如此复杂，也可以使用React挂钩之类的工具。账单格式：{//accesing detail.map（（detail，Index）=>{detail.map（（detailItem，Index））=>{}但您的所有应用程序变量/数据都位于父组件中的状态对象内，并作为道具传递。如何以道具的形式传递？我想从BillForm@philipjc如果他使用国家管理来达到这个目的，不是更好吗？而不是将数据传递到层次结构的各个层次。@FranciscoArias是一个更好的图托里亚尔将是：