javascript - React：将函数传递给 React 道具，但在组件中访问它时出错

Question

我在同一组件的两个单独渲染中传递了两个道具，并将一个道具作为函数传递，另一个作为字符串传递。但是在组件中访问它进行渲染时，它说：“props.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;

标签： javascriptreactjs

Answer 1

你正在通过prop1，prop2或者。所以你应该通过两个道具。

如果你想通过 props 替代，那么你可以这样做。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;