通过数组映射时,我收到一个巨大的错误,例如:
// Home.tsx
render() {
const { inputs, outputs, expectedOutputs } = this.state;
return (
<ContentContainer>
{inputs.map((input, i) => {
return (
<TestRow
key={i}
rowNumber={i}
xml={inputs[i].xml}
desc={inputs[i].desc}
output={outputs[i]}
expectedOutput={expectedOutputs[i]}
handleTextAreaUpdate={this.handleTextAreaUpdate}
/>
);
})}
</ContentContainer>
);
Run Code Online (Sandbox Code Playgroud)
// TestRow.tsx
interface TestRowProps {
xml: string;
desc: string;
output: string;
expectedOutput: string;
rowNumber: number;
}
class TestRow extends Component<TestRowProps, {}> {
textArea: any;
Run Code Online (Sandbox Code Playgroud)
错误是:
没有重载匹配这个调用。重载 1 of 2,'(props: Readonly): TestRow',出现以下错误。
Type '{ key: number; rowNumber: number; xml: string; desc: string; output: never; expectedOutput: string; …Run Code Online (Sandbox Code Playgroud) 我在用着import { styled } from "@mui/system"; 像这样:
const Column = styled("div")<ColumnProps>`
background: ${(props) => props.backgroundColor ?? "blue"};
`;
export default function App() {
return (
<div>
<Column backgroundColor={"green"}>column</Column>
</div>
);
Run Code Online (Sandbox Code Playgroud)
它产生以下错误:
Warning: React does not recognize the `backgroundColor` prop on a DOM element.
我怎样才能传递这样的道具而不让它触发这样的错误?styled-components 具有“transient-props”,可以使用 $ 调用,但不适用于 @mui/system
我正在尝试传递一个 url 参数,例如
这是我的 App.js:
// route setup
const usersRouter = require('./routes/users');
app.use('/api/users', usersRouter);
module.exports = app;
Run Code Online (Sandbox Code Playgroud)
这是我的 users.js:
router.get('/:facebookUserId', jsonParser, async (req, res) => {
// get user by facebookUserId
const users = db.collection('users');
const facebookUserId = req.params.facebookUserId;
const query = {
facebookUserId: facebookUserId,
};
const user = await findOne(users, query);
res.json(user);
});
module.exports = router;
Run Code Online (Sandbox Code Playgroud)
我的问题是我一添加就得到404
:facebook用户ID
到 router.get()
我试图通过以下方式传递主题:
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
ReactDOM.render(
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<Main />
</ThemeProvider>
</StyledEngineProvider>,
document.getElementById("root")
);
Run Code Online (Sandbox Code Playgroud)
我尝试通过以下方式来阅读:
import { styled } from "@mui/system";
type StyledTabProps = {
isActive: boolean;
};
const StyledTab = styled("div", {
shouldForwardProp: (prop) => prop !== "isActive"
})<StyledTabProps>(({ theme, isActive }) => {
console.log("theme", theme);
return {
color: isActive ? "red" : "blue"
};
});
Run Code Online (Sandbox Code Playgroud)
我尝试传递的主题与最终获得 console.logged 的主题不同(调色板对象中缺少属性)
问题的代码沙箱可以在这里找到:
https://codesandbox.io/s/wandering-https-ubhqs?file=/src/Main.tsx