首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

折叠的ReactJS href属性不能采用props值

是因为React中的组件渲染是基于虚拟DOM的,而href属性是属于真实DOM的属性。在React中,props是用来传递数据给组件的,但是props的值只能是静态的,不能包含变量或表达式。而href属性是一个动态的属性,需要通过JavaScript来动态地改变。

解决这个问题的方法是使用state来保存href属性的值,并在组件渲染时动态地改变href的值。具体步骤如下:

  1. 在组件的constructor函数中初始化state:
代码语言:txt
复制
constructor(props) {
  super(props);
  this.state = {
    href: '初始链接地址'
  };
}
  1. 在组件渲染时使用state中的href值作为href属性的值:
代码语言:txt
复制
render() {
  return (
    <a href={this.state.href}>链接</a>
  );
}
  1. 在需要改变href属性的地方,通过setState方法更新state中的href值:
代码语言:txt
复制
this.setState({ href: '新的链接地址' });

这样,当state中的href值改变时,组件会重新渲染,并将新的href值应用到真实DOM的href属性上。

关于ReactJS和其相关概念的详细信息,推荐腾讯云的产品文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

127. 精读《React Conf 2019 - Day1》

和 default 生成对应 class,而是根据实际样式生成 class,这样做有什么好处呢?...这是因为新增 class 涵盖属性可能已经被其他 class 写到并生成了,此时会直接复用对应属性生成 class 而不会生成新: <a className="App-link" href="https://reactjs.org" target=...国际化仓库命名规则是 reactjs/xx.reactjs.org,比如简体中文国际化仓库是:https://github.com/reactjs/zh-hans.reactjs.org 从仓库 readme...关于数据流的话题目前没有什么新意,但这次 React Conf 关于数据流总结算是比较真诚,总结了以下几个点: 全局数据流现在不是必须,比如 Redux,但也不能说完全不能用,至少在全局状态较为复杂时有必要使用

1.7K20
  • React.js 实战之深入理解组件sublime 插件安装组件间通信

    state属性 用来存储组件自身需要数据。它是可以改变,它每次改变都会引发组件更新。这也是 ReactJS关键点之一。...即每次数据更新都是通过修改 state 属性,然后 ReactJS 内部会监听 state 属性变化,一旦发生变化,就会触发组件 render 方法来更新 DOM 结构。...props属性介绍: props 是一个对象,是组件用来接收外面传来参数。 组件内部是不允许修改自己 props 属性,只能通过父组件来修改。...上面的 getDefaultProps 方法便是处理 props 默认。 ?...组件间通信 父子组件间通信 这种情况下很简单,就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件数据/方法,这样就搭建起了父子组件间通信桥梁

    1.1K51

    ReactJS实战之组件和Props详解

    组件从概念上看就像是函数,它可以接收任意输入(称之为props),并返回一个需要在页面上展示React元素。...比如,App、FeedStory、Comment),类似这些都是抽象成一个可复用组件绝佳选择,这也是一个比较好做法 Props只读性 无论是使用函数或是类来声明一个组件,它决不能修改它自己props...state属性 用来存储组件自身需要数据。它是可以改变,它每次改变都会引发组件更新。这也是 ReactJS关键点之一。...即每次数据更新都是通过修改 state 属性,然后 ReactJS 内部会监听 state 属性变化,一旦发生变化,就会触发组件 render 方法来更新 DOM 结构。...props属性介绍: props 是一个对象,是组件用来接收外面传来参数。 组件内部是不允许修改自己 props 属性,只能通过父组件来修改。

    99320

    React 代码共享最佳实践方式

    ,然后把我们写好mixin包裹成一个数组,将它作为mixins属性: const ComponentOne = React.createClass({ mixins: [DefaultNameMixin...由于mixins属性是一个数组,意味着我们可以同一个组件里调用多个mixin。...类型属性,组件可以调用该props属性来实现组件内部渲染逻辑”。...,会导致每次渲染时候,传入render都会不一样,而实际上并没有差别,这样会导致性能问题。...类组件可以给我们提供一个完整生命周期和状态(state),但是在写法上却十分笨重,而函数组件虽然写法非常简洁轻便,但其限制是必须是纯函数,不能包含状态,也不支持生命周期,因此类组件并不能取代函数组件。

    3K20

    ReactJS 学习——组件

    ReactJS 组件 React 提倡组件化开发方式,每个组件只关心自己部分逻辑,使得应用更加容易维护和复用。 React 还有一个很大优势是基于组件状态更新视图,对于测试非常友好。...constructor 中给 this.state 赋值,来设置 state 初始,每当 state 发生变化, React 重新渲染页面。...this.setState() 方法,this.state 和 this.props 也可能会异步地更新,所以你不能依赖它们目前去计算它们下一个状态。...下面举 React 官网一个输出时间例子,在 Clock 渲染之前设置一个定时器,每隔一秒更新一下 this.state.date ,并在组件移除时候清除定时器。...,我们可以在组件里添加属性来绑定事件和相应处理函数。

    1.1K20

    React源码解析之HostComponent更新(上)

    获取新 prop const nextProp = nextProps[propKey]; //获取老 prop (因为是根据新 props 遍历,所以老 props 没有则为...>、等是不能包含子标签 ② 判断__html设置标签内是否有子节点,如:__html:"aaa" ,就会报错 ③ style属性不为null,但不是Object类型的话,报错 ---...以下逻辑是propKey为删除属性操作 ③ 如果propKey是style属性的话,循环style对象中CSS属性 如果老props有该CSS属性的话,则将其置为空字符串'' 比如: <div...,将新增/更新props加入到数组中 以下操作是针对新增/更新props ① 如果propKey是style属性的话,循环style对象中CSS属性 [1] 如果老styleCSS属性... [2] 如果新style内css属性与老style内不同的话,更新styleUpdates,比如: aaa 置为

    5.9K30

    Vue.js 教程:构建一个特斯拉汽车余电计算器

    作为本教程起点,请克隆这个 Github 存储库: https://github.com/petereijgermans11/workshop-reactjs-vuejs 然后转至 vuejs-app...cdworkshop-reactjs-vuejs/vuejs-app 阅读 README.md,了解我们要执行任务。上图是我们将要构建应用程序示例。...数据绑定最简单形式是使用 Mustache 语法(双括号)文本插:{{greeting}} 在上面的示例中,{{greeting}}替换为来自 data()-function Hello Tesla...TeslaBattery 组件该组件负责定义、创建数据并通过“props”将数据传递给子组件。它还负责管理应用程序状态。 完全折叠时,我们可以看到这个组件由以下属性组成。 ?...components 属性 包含此组件使用所有子组件。 computed 属性 包含已缓存函数。也就是说,仅当一个函数依赖于特定数据属性,并且此属性状态改变时,才执行该函数。

    3.4K10

    React 三大属性之一 props一些简单理解

    顾名思义,props就是属性简写,是单个,是在父组件中定义或已经在state中,并将这些传递给其子组件。props本身不可变,但可以通过触发state变化,反过来改变props本身。...props作用 作用:用于接收组件外部数据 传递数据: 通过给组件标签添加属性 接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据 props特点 可以给组件传递任意类型数据...props是只读属性不能进行修改 使用类组件时,如果写了构造函数,应该将props传递给super(),否则无法在构造函数中获取到props,其他地方是可以拿到 props应用场景 1,...子组件调用父组件方法 (1)子组件要拿到父组件属性,需要通过 this.props 方法。...2,父组件调用子组件方法 在 ReactJS 中有个叫 ref 属性。这个属性就像给组件起个引用名字一样,子组件被设置为 ref 之后(比如 ref=“xxx”)。

    5.8K40

    React.js基础知识 函数组件和类组件(二)

    : componentWillReceiveProps(nextProps/nextState) =>接收最新属性之前,基于this.props.xxx获取是原有的属性信息...:只能调取组件时候传递进来,不能自己在组件内部修改(但是可以设置默认和规则) 组件状态是可读写:状态改变会引发组件重新更新(状态是基于setState改变) 组件实例上可以放一些信息...){ super(props) //继承this } static defalutProps={} //设置默认属性 属性是可读不可写...,就是不能修改属性 static propTypes={} // 设置属性传递进来类型 和vue 属性类似,但是它是一个插件想要用需要下载 //...this.refs.box 这个属性就是dom对象 最新生命周期变化 (https://reactjs.org/blog/2019/08/08/react-v16.9.0.html) componentWillMount

    1.1K20

    React 三大属性之一 props一些简单理解

    顾名思义,props就是属性简写,是单个,是在父组件中定义或已经在state中,并将这些传递给其子组件。props本身不可变,但可以通过触发state变化,反过来改变props本身。...props作用 作用:用于接收组件外部数据 传递数据: 通过给组件标签添加属性 接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据 props特点 可以给组件传递任意类型数据...props是只读属性不能进行修改 使用类组件时,如果写了构造函数,应该将props传递给super(),否则无法在构造函数中获取到props,其他地方是可以拿到 props应用场景 1,...子组件调用父组件方法 (1)子组件要拿到父组件属性,需要通过 this.props 方法。...2,父组件调用子组件方法 在 ReactJS 中有个叫 ref 属性。这个属性就像给组件起个引用名字一样,子组件被设置为 ref 之后(比如 ref=“xxx”)。

    1.3K10
    领券