Не удается создать экземпляр StatelessFunctionalComponent, который, вероятно, возвращает нуль

Question

Я определил компонент:

interface Role { 
    name: string; 
    description: string; 
} 

interface BPRolesProps extends React.Props<null> { 
    roles: Role[]; 
} 

const BPRoles = ({ roles }: BPRolesProps) => { 
    if (!roles.length) { 
    return null; 
    } 
    return (
    <div> 
     {roles.map(r => <div key={r.name}><span title={r.description}>{r.name}</span></div>)} 
    </div> 
); 
}; 

Тогда я пытаюсь сделать это с помощью визуализации:

render(<BPRoles />, null); 

Проблема заключается в том, что я получаю эту ошибку:

error TS2605: JSX element type 'Element | null' is not a constructor function for JSX elements. 
    Type 'null' is not assignable to type 'ElementClass'. 

Answer 1

Существует проблема, связанная с этой проблемой here.

В настоящем время, этот трюк может быть использован в качестве обходного пути:

const BPRoles = ({ roles }: BPRolesProps) => { 
    if (!roles.length) { 
    return null!; // <= never is assignable to anything, so the return type will be Element 
    } 
    return (
    <div> 
     {roles.map(r => <div key={r.name}><span title={r.description}>{r.name}</span></div>)} 
    </div> 
); 
}; 

Answer 2

Чистые функциональные компоненты без гражданства не могут быть отображены таким образом, вместо этого вам понадобится контейнер компонент, который построен с использованием стандартного React.createClass или с использованием версии es6, и будет отображать ваш компонент без гражданства и быть тем, что используется для метода ReactDOM.render. см. https://github.com/facebook/react/issues/5455

также ReactDOM.render ожидает элемент dom как второй аргумент. render(<BPRoles />, null); вам нужен действительный элемент html в качестве второго аргумента, вы передаете значение null, которое React знает, не является элементом DOM.