Реагировать Только вернуть реквизиты. Дети

Все:

Я новичок в React, мне интересно, как я могу построить только компонент с логикой без добавления какого-либо элемента (используется только для обработки некоторых данных), например:

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

Ответ 1

EDIT В 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>
    }
}

Ответ 2

Реакция компонентов ДОЛЖЕН иметь один элемент 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>
    )
}

Ответ 3

Как указано JCD, render должен возвращать либо один корень, либо null. Есть еще пара вариантов:

Если LogicCom не нужно передавать данные по дереву, его можно использовать как лист.

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

Если вам нужно передать данные вниз (например, LogicCom управляет входящими реквизитами или генерирует новые реквизиты), вы можете либо потребовать одного ребенка, как описано в @Charlie 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);