Question

我很确定答案是否定的，但是

有没有办法编写这样的HTML元素：

<button innerText="This is the button text" />

<!-- INSTEAD OF LIKE THIS: -->

<button>This is the button text</button>

对于这样的示例，我的请求似乎很笨拙，但是当您有多个要通过ReactJS返回的看起来像这样的元素时，这更有意义。

<button
  className="btn"
  somePropA="Some Value"
  somePropB="Some Value"
  somePropC="Some Value"
  title="Some title"
>
  Some button innerText
</button>

<!-- VERSUS: -->

<button
  className="btn"
  somePropA="Some Value"
  somePropB="Some Value"
  somePropC="Some Value"
  title="Some title"
  innerText="Some button innerText"
/>

我很希望能够在button，span等网站上做到这一点。

Answer 1

使用React，您可以为Button（或输入或任何其他HTML元素）创建一个组件，并将信息作为道具传递，如下所示：

来自父级组件：

import React, {Component} from 'react';
import Button from './button'; // This is your button component

class App extends Component {

  render() {
    return (<Button 
             innerText="Your inner text" // Here, you can pass the text as props. You could also pass a class name, id, etc.
           />); 
  }
}

export default App;

通过子（按钮）组件。我使用的是功能性的无状态组件，但您可以根据需要使用有状态组件：

import React from 'react';

const Button = ({innerText})=>{

  return <button>{innerText}</button>
}

export default Button;

Answer 2

使用CSS的pseudo element和attr()函数可以很容易地使用CSS完成此操作，并且您可以使用属性选择器定位任何元素。

对于自定义属性，假设一个使用data-*前缀，因此我在此处添加了它。

堆栈片段

[data-innerText]::before {
  content: attr(data-innerText);
}

/* specifically target span base element */
span[data-innerText] {
  display: inline-block;
  color: red;
  font-size: 20px;
  padding: 20px;
  letter-spacing: 10px;
  text-transform: uppercase;
}

<button data-innerText="This is the button text"></button>
<div>
  <span data-innerText="This is a span"></span>
</div>
<div>
  <button>And it only adds the text to elements that have the attribute set</button>
</div>

Answer 3

您可以使用Javascript执行此操作，但是HTML内置没有任何方法。您的JavaScript看起来像：

document.getElementById("mybtn").value = "Hello";

Answer 4

您可以使用仅具有HTML和CSS的attr()函数的任何属性，对任何元素执行此操作：

button:after {
  content: attr(any-attr);
}

<button any-attr="YOUR TITLE"></button>

HTML标记：通过属性而不是通过作为子项传递值来编写元素textContent？

4 个答案: