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

折叠的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 属性,只能通过父组件来修改。

    1K20

    React 代码共享最佳实践方式

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

    3.1K20

    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属性的话,则将其值置为空字符串'' 比如: 的props加入到数组中 以下操作是针对新增/更新的props的 ① 如果propKey是style属性的话,循环style对象中的CSS属性 [1] 如果老style的CSS属性有值... [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”)。

    6.3K40

    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.2K20

    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
    领券