javascript - HTML 标记 : Write elements textContent via attribute instead of via passing the value as a child?

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 元素)创建一个组件，并将信息作为 props 传递，如下所示:

来自父组件:

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;