如何在react hook中声明默认道具

时间:2019-06-19 06:41:27

标签: reactjs

我想在一个或多个钩子组件中声明默认道具

通常我们会这样做

$split = explode(PHP_EOL." ".PHP_EOL." ", $string);
print_r($split);

这显然行不通

5 个答案:

答案 0 :(得分:3)

function Body({counter=0}) {
    return (
        <div>
            body
        </div>
    );
}

计数器现在的初始值为0

答案 1 :(得分:2)

通常称为功能组件,而不是挂钩组件。

对于defaultProps,您可以这样操作:

const Body = () => {
    return (
        <div>
            body
        </div>
    );
}

Body.defaultProps = {
    counter: 0
}

答案 2 :(得分:2)

您可以这样简单地完成

const Body = (props) => {
    const {foo = 'defaultValue'} = props;

    return <div>{foo}</div> // It will show defaultValue if props foo is undefined
}

答案 3 :(得分:0)

钩子只是常规函数,您可以像在常规函数中定义缺省值一样定义缺省值

function useNameHook(initialName = "Asaf") {
  const [name, setName] = useState(initialName);

  // you can return here whatever you want, just the name,
  // just the setter or both
  return name;
}

function Comp({ name }) {
  const myName = useNameHook(name);

  return <h1>Hello {myName}</h1>;
}

function App() {
  return (
    <div className="App">
      {/* without name prop */}
      <Comp />
      {/* with name prop */}
      <Comp name="angry kiwi" />
    </div>
  );
}

答案 4 :(得分:0)

您可以在功能组件之外声明defaultProps。就您而言,就是这样-

   function Body(props) {
    return (
        <div>
            {props.counter}
        </div>
    );
  }
  Body.defaultProps = {
      counter: 0
  }