通过第三方组件将参数从父级传递给子级答案

【问题标题】：Pass parameter from parent to child through third-party component通过第三方组件将参数从父级传递给子级
【发布时间】：2018-06-26 16:15:07
【问题描述】：

是否可以将 Component1 中定义的函数（仅在该组件内部，而不在任何其他组件中）作为属性传递给 Component2？

如果没有 Route 组件，我会使用 React.cloneElement 方法。

Route 只能在 MainComponent 定义中使用。

class MainComponent extends React.Component {
render() {
 return (
   <Component1>
     <Route
       path={match.url + '/myUrl'}
       render={() => (
         <Component2 />
       )}
     />
   </Component1>
  )
 }
}

有什么想法吗？

【问题讨论】：

您能详细说明一下吗？您要传递的功能是什么？似乎您只是想将一个函数作为prop 传递给Component2。
实际上我需要从父级调用子级的方法。但这与这个问题无关。是的，我需要将函数作为道具传递。
你能把 Component1 也放在渲染中吗？
不，问题是我无法更改组件顺序

标签： javascript reactjs react-router

【解决方案1】：

你可以这样做：

class MainComponent extends React.Component {
  callComponent1func = (...params) => {
    if(this.component1Ref && typeof this.component1Ref.component1func === "function"){
      this.component1Ref.component1func(...params);
    }
  };

  render() {
   return (
     <Component1 ref={(element) => this.component1Ref = element}>
       <Route
         path={match.url + '/myUrl'}
         render={() => (
           <Component2 component1func={this.callComponent1func}/>
         )}
       />
     </Component1>
    )
  }
}

这里的函数callComponent1func作为一个prop传递给Component2，当它被调用时，它通过ref访问Component1并调用它的函数。从而实现您的用例。

【讨论】：

【解决方案2】：

用你的函数在 Component2 中定义一个 prop :)

class Component1 extends React.Component {
  callback = () => doSomething()

  render() {
    return (
      <Route
        path={match.url + '/myUrl'}
        render={() => <Component2 callback={this.callback} />}
      />
    )
  }
}


function Component2({ callback }) {
  myFunc();
}

【讨论】：

myFunc 必须在 Component1 中定义

【解决方案3】：

所以在组件 1 中：

import { Route, BrowserRouter} from 'react-router';
class Component1 extends React.Component {
  myFunc(){
    }

  render() {
    return (
      <BrowserRouter>
      <Route
        path={match.url + '/myUrl'}
        render={() => <Component2 callback={this.myFunc} />}
      />
      </BrowserRouter>
    )
  }
}

在组件 2 中，您可以使用 props.muFunc 从 props 调用函数

【讨论】：

你能详细说明吗？

【解决方案4】：

你的意思是这样的吗？

import React from "react";
import ReactDOM from "react-dom";

const A = () => {
  const woof = () => {
    alert("Woof!");
  };

  return <B woof={woof} />;
};

const B = ({ woof }) => {
  return (
    <React.Fragment>
      <h1>Woofatron</h1>
      <button onClick={woof}>click me </button>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<A />, rootElement);

工作示例here。

【讨论】：

第一个例子没有使用Route？
没有 Route 或任何其他第三方组件，它只是没有意义
我不明白——你想使用路由：是还是否？
是的，我需要 A 和 B 之间的路线
也不能在A或B定义中使用Route