代码之家 › 专栏 › 技术社区 › dns_nx

reactjs-如何为组件提供属性

reactjs javascript

dns_nx · 技术社区 · 6 年前

我刚刚读了 reactjs 要添加的网站到一个现有的网站没有写所有新的。

https://reactjs.org/docs/add-react-to-a-website.html

const teamStrengthsDOMContainer = document.querySelector('#homeTeamRatingStats'); 
ReactDOM.render(teamStrengthsElement(TeamStrengths), teamStrengthsDOMContainer);

这是完整的代码。

...
<div id="homeTeamRatingStats"></div>

<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['goalkeeper']; ?>" id="goalkeeperText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['defense']; ?>" id="defenseText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['midfield']; ?>" id="midfieldText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['forward']; ?>" id="forwardText" />
<input type="hidden" value="<?php echo $homeKeeperRating; ?>" id="homeGoalkeeper" />
<input type="hidden" value="<?php echo $homeDefenseRating; ?>" id="homeDefense" />
<input type="hidden" value="<?php echo $homeMidfieldRating; ?>" id="homeMidfield" />
<input type="hidden" value="<?php echo $homeForwardRating; ?>" id="homeForward" />

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" crossorigin></script>
<script src="js/components/teamStrengths.component.js"></script>
...

组成部分:

'use strict';
const teamStrengthsElement = React.createElement;

class TeamStrengths extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
    };
  }

  componentDidMount() {
    let goalKeeperText = document.getElementById("goalkeeperText").value;
    let defenseText = document.getElementById("defenseText").value;
    let midfieldText = document.getElementById("midfieldText").value;
    let forwardText = document.getElementById("forwardText").value;
    let goalkeeper = document.getElementById("homeGoalkeeper").value;
    let defense = document.getElementById("homeDefense").value;
    let midfield = document.getElementById("homeMidfield").value;
    let forward = document.getElementById("homeForward").value;
    let ctx = document.getElementById("homeTeamRatingStatsCanvas");
    let myChart = new Chart(ctx, {type: 'polarArea',
        data: {
            labels: [goalKeeperText, defenseText, midfieldText, forwardText],
            datasets: [{
                label: '',
                data: [parseInt(goalkeeper), parseInt(defense), parseInt(midfield), parseInt(forward)],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false,
            },
        }
    });

  }

  render() {
    return teamStrengthsElement('canvas', 
        {   id: "homeTeamRatingStatsCanvas", 
            style: {
                maxWidth: '400px'
            },
        }
    );
  }
}

const teamStrengthsDOMContainer = document.querySelector('#homeTeamRatingStats');
ReactDOM.render(teamStrengthsElement(TeamStrengths), teamStrengthsDOMContainer);

我该怎么做?有人给我个提示吗? 提前谢谢。

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

您可以像创建 canvas React.component (你把它化名为 teamStrengthsElement ,我 强烈地

ReactDOM.render(
    React.createElement(
        TeamStrengths,
        {
            // props here
        }
    ),
    teamStrengthsDOMContainer
);

Shubham Gupta 6 年前

如果您使用的是JSX。

ReactDOM.render(
    <TeamStrengths />, //add values that you want to pass as props here
    container
);

没有JSX

ReactDOM.render(
    React.createElement(TeamStrengths, {/* add your props here */}),
    container
);