Question

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

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

路由只能在 MainComponent 定义内使用。

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

有什么想法吗？

Answer 1

使用您的函数在Component2中定义道具：）

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

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


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

Answer 2

您可以执行以下操作：

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作为道具传递给Component2，当它被调用时，它通过ref访问Component1并调用它的函数。从而实现您的用例。

Answer 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从道具调用函数

Answer 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。

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

4 个答案: