用子项方法转移道具中的成分

Question

它可以通过子方法转移道具中的组件吗？

我要组件：

 let a = (<div>
        <button onClick={TContainer.METHOD}>TuCLIK</button>
  </div>);

 <TContainer data={ restaurantList } component={a}/>

我想在childen中调用方法，但在parent中创建元素。 我想在道具上传递这个组件。

如果可能的话，我不知道在TContainer.METHOD中写什么来调用childen方法

Answer 1

您没有在道具中传递组件 ，而是表达。
组件应该是扩展React.Component的class ，或者是返回jsx标记的函数。
现在，当我们知道组件只是函数时，就知道可以将参数传递给它们，因此可以将函数引用作为参数传递：

let A = (onClick) => <div><button onClick={onClick}>TuCLIK</button></div>;
<TContainer data={ restaurantList } component={<A onClick={TContainer.METHOD} />}/>

请注意 ， 组件应大写。

编辑
作为对您的评论的跟进，很抱歉，我想我误解了您的问题。
你不能像这样通过React组件传递方法的引用。

• 对于这种情况，我们可以使用几种方法，其中一种方法是使用this.props.children并将child组件作为child传递。
  例如- <Parant><Child/></Parent>
• 我们可以将子组件作为道具传递。
  例如- <Parent component={Child} />或<Parent component={<Child />} />
• 我们可以将父组件编写为HOC，并用它包装子组件。
  例如- Parent(Child)

在上述所有示例中，您不能直接传递在父级作用域内声明的函数的引用（作为对子级的支持）。
为了在子级的内部范围内将子级传递给子项，您应该在render方法内执行子项。
例如：

  render() {
    return (
      <div>
        <this.props.component onClick={this.handleClick}/>
      </div>
    );
  }

这是一个片段，演示了上面的示例之一：

 const Child = ({onClick}) => <div onClick={onClick}>Im a child, Click me!</div> class Parent extends React.Component { constructor(props){ super(props); this.state = { counter: 0 } this.addCount = this.addCount.bind(this); } addCount(){ this.setState({counter: this.state.counter + 1}); } render() { return ( <div> <div>{`Count = ${this.state.counter}`}</div> <this.props.component onClick={this.addCount}/> </div> ); } } const App = () => <Parent component={Child} />; ReactDOM.render(<App />, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>