Блог

Я работаю над проектом, который в основном создан с использованием PHP и HTML, и я хочу создать виджет с React.js .

Для достижения этой цели я создал компонент React и использовал его тег react в представлении HTML следующим образом, все работает нормально, кроме синтаксического анализа реквизита.

Мой вид 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);
 

Моя проблема заключается в анализе этого свойства ‘date’ для компонента react. Это работает, когда я добавляю этот реквизит для рендеринга функции следующим образом:

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

Но я хочу проанализировать его из представления HTML.

• Я использую react CDN.
• Дата — это просто фиктивные данные, которые я позже интегрирую с реальными значениями.

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);
 

2. Если у вас большой json, создайте встроенный тег скрипта с идентификатором и проанализируйте его содержимое

 // 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);