javascript - React isValidElement comes out as false - Stack Overflow

admin管理员组

文章数量:1205733

Here is a simple example:

const Foo = () => {
    return (
    <div>foo</div>
  );
}

class Bar extends React.Component {
    render() {
    return (
        <div>bar</div>
    )
  }
}

console.log(React.isValidElement(Foo));
console.log(React.isValidElement(Bar));

Both of these return false. Why is that?

Here is a simple example:

const Foo = () => {
    return (
    <div>foo</div>
  );
}

class Bar extends React.Component {
    render() {
    return (
        <div>bar</div>
    )
  }
}

console.log(React.isValidElement(Foo));
console.log(React.isValidElement(Bar));

Both of these return false. Why is that?

• javascript
• reactjs

Share Improve this question Follow asked Sep 26, 2017 at 17:55 KoushaKousha 36.2k5959 gold badges186186 silver badges313313 bronze badges 4

• 8 Component != Element . An element is basically the result of "instantiating" (also not really, not sure what the right term is) a component. Try console.log(React.isValidElement(<Foo />));. Basically, you get an element when you call React.createElement(Foo), which is what <Foo /> is doing under the hood. – Felix Kling Commented Sep 26, 2017 at 17:56
• @FelixKling Ah makes sense. Thanks! I do have another question if the answer is simple, otherwise I'll create a separate question. How do I clone Foo or Bar and pass additional props to? React.cloneElement returns error – Kousha Commented Sep 26, 2017 at 17:59
• I'm not sure what you are trying to achieve. You can pass as many props to a component as you want. But the component will probably only access the ones it knows about. So when you say you want to pass additional props I assume you want to access them somewhere somehow as well. But that basically means to change the implementation of the function/component, so I don't know what "cloning" a component would do exactly. Maybe you can provide a better example for your use case? – Felix Kling Commented Sep 26, 2017 at 18:01
• 1 @FelixKling, okay I'll create a separate question. If you post your comment as answer, I can mark it as the solution! – Kousha Commented Sep 26, 2017 at 18:02

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 17

Component != Element

Foo and Bar are components. An element is basically the result of "instantiating" (also not really, not sure what the right term is) a component. It's the combination of a constructor/function/string (for HTML components), props and children.

You get an element when you call React.createElement(Foo), which is what <Foo /> is doing under the hood.

const Foo = () => {
    return (
    <div>foo</div>
  );
}
console.log(React.isValidElement(<Foo />));
console.log(<Foo bar={42} />);

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

To check for a function component:

typeof Foo === 'function'

const Foo = () => <div>foo</div>;

class Bar extends React.Component {
    render() {
       return (
          <div>bar</div>
       )
    }
}

console.log(React.isValidElement(<Foo />));
console.log(React.isValidElement(<Bar />));

本文标签： javascriptReact isValidElement comes out as falseStack Overflow