Question

我看到了一些类似的问题，但是关于父/子元素，我有那种节点树：

IndexPage -> Modals -> ClientDetails(it's modal component)
          -> Header

我想在Header内调用ClientDetails.openModal，尝试了多种方法，例如在indexPage中为ClientDetails创建引用，然后将indexPage传递给prop这样的标头，但这很奇怪，我看到了props.IndexPage的引用，但是在尝试访问引用时直接没有找到

class IndexPage extends React.Component {
  constructor(props) {
    super(props);

    this.modals = React.createRef();
  }

  render() {
    return (
      <Layout>
        <SEO/>
        <Header indexPage={this}/>
        <Story/>
        <Products/>
        <Clients/>
        <Reviews/>
        <Partners/>
        <Footer/>
        <Modals ref={this.modals} />
      </Layout>
    )
  }
}

class Modals extends React.Component {
  constructor(props) {
    super(props);
    this.clientDetailsRef = React.createRef();
  }

  render() {
    return (
      <>
        <ThankYou/>
        <ContactDetails ref={this.clientDetailsRef}/>
      </>
    )
  }
}

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false, isSticky: false };
    this.toggle = this.toggle.bind(this);


    this.indexPage = props.indexPage
    console.log(this.indexPage)
    console.log(this.indexPage.modals)
  }
}

Answer 1

我会尝试这样做：

//global declarations 
v4f vert_quads[GLYPH_BUFFER_SIZE] = {};
v4f tex_quads[GLYPH_BUFFER_SIZE] = {};
v4f tex_quads2[GLYPH_BUFFER_SIZE] = {};
float tex_ids[GLYPH_BUFFER_SIZE] = {};
v4f colors[GLYPH_BUFFER_SIZE] = {};
v4f infos[GLYPH_BUFFER_SIZE] = {};
float zpos[GLYPH_BUFFER_SIZE] = {};
    ...
#define OPENGL_Buffer_Data(id, memory, size, draw_type)             \
    glBindBuffer(GL_ARRAY_BUFFER, id);                              \
    glBufferData(GL_ARRAY_BUFFER, size, &memory, draw_type)         \


void OPENGL_Render_Texture()
{
    memset(vert_quads, 0, GLYPH_BUFFER_SIZE * 16); // clean vert buffer
    vert_quads[0] = { 0,TEXTURE_DIM,0,TEXTURE_DIM };
    ...

    OPENGL_Buffer_Data(quad_def_ID, quad_def, sizeof(quad_def), GL_STATIC_DRAW);
    OPENGL_Buffer_Data(vert_quads_ID, vert_quads, sizeof(vert_quads), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(tex_quads_ID, tex_quads, sizeof(tex_quads), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(tex_quads2_ID, tex_quads2, sizeof(tex_quads2), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(tex_ids_ID, tex_ids, sizeof(tex_ids), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(colors_ID, colors, sizeof(colors), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(infos_ID, infos, sizeof(infos), GL_DYNAMIC_DRAW);
    OPENGL_Buffer_Data(zpos_ID, zpos, sizeof(zpos), GL_DYNAMIC_DRAW);
}

void OPENGL_Render_Text_Buffer()
{

    memset(vert_quads, 0, sizeof(vert_quads));  // clean vert buffer
    memset(colors, 0, sizeof(colors));          // clean colors buffer
    memset(infos, 0, sizeof(infos));          // clean colors buffer
    memset(zpos, 0, sizeof(zpos));          // clean colors buffer
    ...
}
// and lastly in two more functions as
    glDrawArraysInstanced(GL_TRIANGLES, 0, 6, GLYPH_BUFFER_SIZE); // x times 6 vertices

但是请注意：该属性最有可能在Header的构造函数中不起作用。不过，在执行诸如Button.onClick回调之类的操作时，它应该可以工作。

Answer 2

这是一个从父级调用子级功能的小提琴

https://jsfiddle.net/c1qfn9Lx/9/

class Modal extends React.Component {
 constructor(props) {
  super(props);
  this.state= {
   showModal: false
  }
  this.toggleModal = this.toggleModal.bind(this)
 }
 toggleModal() {this.setState({showModal: !this.state.showModal})}

render() {
 const { showModal } = this.state;
 return(
  <div className="modal">
   {showModal && 
    <div>
     Showing modal
    </div>
   }
  </div>
 )
 }
}

class TodoApp extends React.Component {
 constructor(props) {
   super(props)
   this.modalRef = React.createRef()
   this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  this.modalRef.current.toggleModal();
 }

 render() {
   return (
     <div className="parent">
       <Modal ref={this.modalRef} />
       <button onClick={this.handleClick}>Click</button>
     </div>
   )
 }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Answer 3

我认为您可以使用react.js context解决问题。您想控制Header组件中的Modals组件。因此，您尝试引用Header组件中的Modals组件切换功能来解决此问题。我认为这是一个很好的解决方案。但我认为，共享对等组件中的状态也是另一种解决方案。因此，您可以使用react.js上下文在它们的父组件中的两个对等组件之间共享状态。我认为这样做是在响应声明式编程之后。

Please check this code

如何从另一个组件中的组件正确调用函数

3 个答案: