React:将函数传递给React props，但在组件中访问它时给出错误

Question

我在同一组件的两个单独渲染中传递了两个道具，并将一个道具作为函数传递，另一个作为字符串传递。然而，在组件中访问它进行渲染时，它说:"道具。Prop1不是一个函数">

这是我的App.js文件:

import React from 'react';
import Test from './components/Test';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Test prop1={() => {return "a"}}/>
<Test prop2="b"/>

</header>
</div>
);
}
export default App;

我的Test.js文件:

import React from "react";
function Test(props) {
return (
<>
<div className="test">
<div>Test data {props.prop1()} </div>
<div>{props.prop2}</div>
</div>
</>
);
}
export default Test;

Answer 1

您在<App>中声明了2个<Test>组件，并且您没有在第二个组件上传递prop2:

你可以像这样同时传递它们:

import React from 'react';
import Test from './components/test';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit
{' '}
<code> src / App.js </code>
{' '}
and save to reload.
</p>
<Test
prop1={() => 'a'}
prop2="b"
/>
</header>
</div>
);
}
export default App;

Answer 2

您正在交替通过prop1和prop2。所以你应该传递两个道具。

如果你想传递props选项，你可以使用as。添加默认函数(它只是调用，但不会做任何事情)，如果prop1缺席

prop1 = () => {}

1)当您想要显示div时，尽管prop1的值

import React from "react";
function Test({ prop1 = () => {}, prop2 }) {
return (
<>
<div className="test">
<div>Test data {prop1()} </div>
<div>{prop2}</div>
</div>
</>
);
}
export default Test;

2)如果你想隐藏div，如果prop1不存在，那么你可以使用&&作为

import React from "react";
function Test(props) {
return (
<>
<div className="test">
{
props.prop1 && <div>Test data {props.prop1()} </div>
}
{
props.prop2 && <div>{props.prop2}</div>
}
</div>
</>
);
}
export default Test;