我还没react 过来.

我一直在试验react,我被困在如何使用props 通过数组上.

case 1:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config={c}/>, document.body);

这是渲染helloworld程序.这是意料之中的.

后来我试过了.

case-2:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
              {this.props.config} helloworld ;
            </div>
            );
    }
});

React.render(<Navigation config="React"/>, document.body);

这是helloworld.这是预期的,因为没有定义propType.

接下来我试过了.

case-3 :

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config=['!!!'] />, document.body);

这不是在渲染任何东西.

后来我把React.render(<Navigation config=['!!!'] />, document.body);改成了React.render(<Navigation config={['!!!']} />, document.body);

它呈现了helloworld!!!

我在一些教程中读到,大括号用于传递变量,以便JSX知道它们是外部变量.

但是为什么case-3不使用显式大括号,尽管数组是在调用过程中生成的,为什么它对case-2不起作用,因为字符串是内联的.

花括号什么时候用?

如果有人能给我指点任何关于react的好书或在线教程,这会对我有所帮助.

推荐答案

花括号only需要在JSX元素中使用.这样地:

<MyComponent somProp={['something']} />

在上面的例子中,{}是这样说的:"判断我在其中传递的表达式,并将其作为props 传递".在{}中,可以传递any个有效的JavaScript对象或表达式.请注意,如果你传递一个字符串,特别是字符串,你不需要花括号...比如<MyComponent somProp="something" />.

上述代码相当于:

var myArray = ['something'];
<MyComponent somProp={myArray} />

Reactjs相关问答推荐

安装后未渲染tailwind

在Reaction+Redux+RTKQuery中对API调用进行排序

使用Reaction钩子窗体验证可选字段

未定义发送的数据无法在reactjs中找到原因

shadcn输入+窗体+Zod;一个部件正在改变要被控制的不受控制的输入;

无法在 NextJS 中获取嵌套对象

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么?

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

React - 将一个充满空值的无限大小的数组存储在 ref 中是否可以,或者我应该重置数组吗?

Zod 验证模式根据另一个数组字段使字段成为必需字段

Wordpress 插件在激活时创建一个 React Public 页面

将复杂状态和 setState 传递给更简单的 api

如何解决在 react.js 中找不到模块错误

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

调用 Jest 和服务方法的问题

getAttribute 函数并不总是检索属性值

将 Material UI 菜单渲染为

由于另一个子组件,如何在react 中渲染另一个子组件

为什么我的 LINK 组件不呈现与 URL 匹配的组件? , 它只改变浏览器上的 url

react-player youtube player 吞下按键事件