是否有任何 eslint 规则可以防止“对象作为 React 子对象无效”

Question

I'm writing React with Typescript and, after making a change to my code, I started seeing Objects are not valid as a React child errors.

I had changed a property from a string to an Optional<string> , so the error totally makes sense since my <div>{property}</div> code was no longer correct.

So, this is a type error being caught at runtime.

I'm not doing any casting or any other code "tricks" to try to subvert pre-existing type checking; I'm just rendering a value that React detects at runtime to be an object.

It seems to me that an appropriate linting rule or typescript configuration should have been able to capture that property is no a valid React child.

Here's a very simple example ( TSPlayground ):

type Props = {
    example:{}
};

const Foo = ({example}: Props) => <div>{example}</div>

I would expect an error pointing to the use of example inside the JSX.

I've been doing some googling, but I can't find a rule that seems like it would catch this.

Is there one that anyone knows of?

Answer 1

As others have mentioned there's no such a feature available right now. Furthermore linters are more geared towards styling than capturing compilation errors. I don't think what you're asking is possible because example is a dynamic type and setting it to a string makes it a valid JSX node while setting it to an object makes it invalid. Since JS is a dynamic language we cannot know this ahead of time. Typescript helps in this case, but that's a separate type system from eslint rules and as @jonrsharpe has mentioned in the comments there's an issue on typescript repository to add the feature you're requesting (#35622 ).