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
}

在docs中了解更多相关信息。

原始回答

你有什么工作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元素。

来自the official docs：

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

Answer 3

你可以只返回孩子而不包装孩子。 Trick是创建一个包装器组件，然后将子项修改为一个数组，这是React所需的。

Wrapper.js

＆＃13;

import React, { Component } from 'react';

export default class extends Component {
  render() {
    return React.Children.toArray(this.props.children);
  }
}

＆＃13;

现在你可以简单地在这个包装器组件中包装其他任何内容。

＆＃13;

<Wrapper>
  <h1>Hello, world!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper odio nec semper suscipit.</p>
</Wrapper>

＆＃13;

现在包装器中的元素将呈现，而不必将其包装在DIV中。

Answer 4

作为JCD stated，渲染必须返回单个根子项或null。还有其他几个选择：

如果LogicCom不需要在树中传递数据，则可以将其用作叶子。

<Parent>
  <LogicCom />
  {/* other children */}
</Parent>

如果您确实需要传递数据（例如，LogicCom操纵其传入道具或生成新道具），您可以要求@Charlie's response中所述的单个孩子（进一步记录为propTypes）：

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

LogicCom.propTypes = {
    children: React.PropTypes.element
};

或者使用高阶组件构造来包装另一个组件：

const LogicCom = function (Wrapped) {
    return class extends Component {
      render () {
          // forward received props and override/add as needed
          <Wrapped {...this.props} />
      }
    }
};

// usage elsewhere: WrappedComponent will receive whatever props LogicCom
// receives + overrides/adds.
const WrappedComponent = LogicCom(AnotherComponent);

Answer 5

您可以使用React.Fragment组件包装孩子

class LogicCom extends Component {
    constructor(props){super(props);this.props = props;}
    render(){
        return <>{children}</>
       // or return <React.Fragment>{children}</React.Fragment> it's the same
    }
}

Answer 6

Functional component可以简单地返回app.setAsDefaultProtocolClient('myapp');道具，原样

children

const Wrapper = ({children}) => children

ReactDOM.render(<Wrapper>123</Wrapper>, document.body)

React只返回props.children

6 个答案: