从 HTML 视图解析反应道具以反应组件

Question

我正在做一个主要用 PHP 和 HTML 制作的项目，我想用 React.js 创建一个小部件。

为了实现这一点，我所做的是，我创建了 React 组件，并像这样在 HTML 视图上使用了它的 react 标签，除了解析 props 之外一切正常。

我的 HTML 视图：

<div class="col-md-12 col-xs-12 prod-schedule" id="ProgressBarWidget">
    <ProgressBars date='foo'></ProgressBars>
</div>

对应的react组件JS：

const Element = document.getElementById("ProgressBarWidget");

class ProgressBars extends React.Component{

    render(props){
        return (
            <div>
                <label>Cakes</label>
                <div className="progress">
                    <div className="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                    aria-valuemin="0" aria-valuemax="100" style={{width:60+'%'}}>
                        40% Complete {this.props.date}
                    </div>
                </div>

            </div>
        )
    }
}
ReactDOM.render(<ProgressBars />, Element);

我的问题是解析这个“日期”属性来反应组件。当我像这样将该道具添加到渲染函数时，它可以工作：

ReactDOM.render(<ProgressBars date='sample'/>, Element);

但我想从 HTML 视图中解析它。

• 我正在使用 React CDN。
• 日期只是虚拟数据，我稍后会将实际值与其整合。

Answer 1

React 将 React 组件渲染到某个有效的 DOM 元素中。 您对 PHP (<ProgressBars date='foo'></ProgressBars>) 所做的操作不是有效的 DOM 元素。

您需要用您的 PHP 代码呈现小部件的占位符，通常与 id 一起使用（就像您所做的那样）。 然后将React 元素渲染到其中。

如果你想将数据从 PHP 传递到 react 组件，你有几个选择：

1. 如果要传递的值很少，可以使用data 属性传递它们

// some-file.php
<div
  class="col-md-12 col-xs-12 prod-schedule"
  id="ProgressBarWidget"
  data-prop1="value1"
  data-prop2="value2"></div>

const Element = document.getElementById("ProgressBarWidget");
const data = {
  prop1: Element.dataset.props1,
  prop2: Element.dataset.props2,
};

class ProgressBars extends React.Component {
  render(props) {
    return (
      <div>
        <label>Cakes</label>
        <div className="progress">
          <div
            className="progress-bar progress-bar-success"
            role="progressbar"
            aria-valuenow="40"
            aria-valuemin="0"
            aria-valuemax="100"
            style={{ width: 60 + '%' }}>
            40% Complete {this.props.date}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<ProgressBars data={data} />, Element);

1. 如果你有很大的 json，生成一个带有 id 的内联脚本标签，并解析它的内容

// some-file.php
<div class="col-md-12 col-xs-12 prod-schedule" id="ProgressBarWidget"></div>
<script type="application/json" id="ProgressBarWidgetData">
{
  "foo": "bar",
  "foo1": "bar2",
  ... // your large data object
}
</script>

const Element = document.getElementById("ProgressBarWidget");
const data = JSON.parse(document.getElementById("ProgressBarWidgetData").contentText);

class ProgressBars extends React.Component {
  render(props) {
    return (
      <div>
        <label>Cakes</label>
        <div className="progress">
          <div
            className="progress-bar progress-bar-success"
            role="progressbar"
            aria-valuenow="40"
            aria-valuemin="0"
            aria-valuemax="100"
            style={{ width: 60 + '%' }}>
            40% Complete {this.props.date}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<ProgressBars data={data} />, Element);