React只返回props.children

Question

所有:

我对React很新,我想知道如何在不添加任何元素(仅用于处理某些数据)的情况下构建仅逻辑组件,例如:

class LogicCom extends Component {
    constructor(props){super(props);this.props = props;}
    render(){
        return (
            {this.props.children}
        )
    }
}

Answer 1

编辑在React v16 +中,您可以从组件返回字符串和数组.因此,一个组件简单地返回它的孩子是完全有效的......

render() {
  return this.props.children
}

在文档中阅读更多相关信息.

原始答案

你有什么工作IFF只有一个孩子(你修复了你的语法错误).但是,子节点可以是许多子节点的数组,并且您无法在render函数中返回数组.所以,你必须做两件事之一......

1)强制你的组件只接受一个React.Children的孩子......

class LogicCom extends Component {
    render(){
        // this will throw if there are many children
        return React.Children.only(this.props.children)
    }
}

2)将孩子包裹在另一个组件中......

class LogicCom extends Component {
    render(){
        return <div>{ this.props.children }</div>
    }
}

Answer 2

React 组件必须有一个根 DOM 元素来渲染。

来自官方文档：

render() 方法是必需的。

调用时，它应该检查 this.props 和 this.state 并返回单个子元素。该子元素可以是本机 DOM 组件（例如 React.DOM.div()）的虚拟表示，也可以是您自己定义的另一个复合组件。

您还可以返回 null 或 false 来指示您不希望呈现任何内容。在幕后，React 渲染一个标签以与我们当前的比较算法配合使用。当返回 null 或 false 时，ReactDOM.findDOMNode(this) 将返回 null。

对于你的情况来说，这很简单——只需将你的包裹this.props.children在某种外部元素中即可。

render(){
    return (
        <div>{this.props.children}</div>
    )
}