使用children方法在props中传输组件

Question

可以使用children方法在props中传输组件吗？

我需要组件：

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

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

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

如果它可能我不知道用 TContainer.METHOD 写什么来调用childen方法

Answer 1

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

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

注意 components should be capitalized.

修改
作为你评论的后续内容，抱歉，但我误解了你的问题 你不能从像这样的React组件传递方法的引用。

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

在上述所有示例中，您无法直接传递在父级范围内声明的函数的引用（作为子级的道具）。
为了让孩子在父母的内部范围内传递道具，你应该在render方法内完成。
例如：

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

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

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;